import { Button, type ButtonTone } from "../button";
import { Modal } from "./modal";

export type ConfirmDialogVariant = "default" | "destructive";

export function ConfirmDialog({
  cancelLabel = "Cancel",
  confirmLabel = "Confirm",
  dismissable = false,
  description,
  isOpen,
  onOpenChange,
  onCancel,
  onConfirm,
  title,
  variant = "default",
}: {
  cancelLabel?: string;
  confirmLabel?: string;
  dismissable?: boolean;
  description?: string;
  isOpen: boolean;
  onOpenChange?: (isOpen: boolean) => void;
  onCancel?: () => void;
  onConfirm?: () => void;
  title: string;
  variant?: ConfirmDialogVariant;
}) {
  const confirmTone: ButtonTone = variant === "destructive" ? "destructive" : "primary";

  return (
    <Modal
      description={description}
      dismissable={dismissable}
      isOpen={isOpen}
      onOpenChange={onOpenChange ?? (() => onCancel?.())}
      title={title}
    >
      <div className="grid gap-4">
        <div className="flex flex-wrap justify-end gap-3">
          <Button onClick={onCancel} tone="secondary">
            {cancelLabel}
          </Button>
          <Button onClick={onConfirm} tone={confirmTone}>
            {confirmLabel}
          </Button>
        </div>
      </div>
    </Modal>
  );
}