import { type ReactNode } from 'react';
import { AlertDialog as RAlertDialog } from 'radix-ui';
import { Button } from '../button';

export const AlertDialog = ({
  trigger,
  title,
  description,
  cancelLabel = 'Cancel',
  actionLabel = 'Confirm',
  destructive,
  onAction,
  open,
  defaultOpen,
  onOpenChange,
}: {
  trigger?: ReactNode;
  title: string;
  description?: ReactNode;
  cancelLabel?: string;
  actionLabel?: string;
  destructive?: boolean;
  onAction?: () => void;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (o: boolean) => void;
}) => (
  <RAlertDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
    {trigger && <RAlertDialog.Trigger asChild>{trigger}</RAlertDialog.Trigger>}
    <RAlertDialog.Portal>
      <RAlertDialog.Overlay className="mta-overlay" />
      <RAlertDialog.Content className="mta-dialog">
        <RAlertDialog.Title className="mta-dialog__title">
          {title}
        </RAlertDialog.Title>
        {description && (
          <RAlertDialog.Description className="mta-dialog__desc">
            {description}
          </RAlertDialog.Description>
        )}
        <div className="mta-dialog__footer">
          <RAlertDialog.Cancel asChild>
            <Button variant="ghost">{cancelLabel}</Button>
          </RAlertDialog.Cancel>
          <RAlertDialog.Action asChild>
            <Button
              variant={destructive ? 'ember' : 'primary'}
              onClick={onAction}
            >
              {actionLabel}
            </Button>
          </RAlertDialog.Action>
        </div>
      </RAlertDialog.Content>
    </RAlertDialog.Portal>
  </RAlertDialog.Root>
);
