Confirm Dialog

"use client";

import type { ReactNode } from "react";
import { AlertDialog } from "radix-ui";

export interface ConfirmDialogProps {
  trigger?: ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  title?: string;
  description?: string;
  confirmLabel?: string;
  cancelLabel?: string;
  onConfirm?: () => void;
  da?: string;
}

/** Gentle confirmation (Radix AlertDialog): a wilting-leaf illustration in a clay circle, serif question, kind consequence text, a sage “keep” action and a quiet clay confirm. */
export function ConfirmDialog({
  trigger,
  open,
  defaultOpen,
  onOpenChange,
  title = "Remove this action from your plan?",
  description = "“Rail instead of short flights” saves about 27 tCO₂e a year. You can add it back anytime.",
  confirmLabel = "Remove it",
  cancelLabel = "Keep it",
  onConfirm,
  da = "organic-soft",
}: ConfirmDialogProps) {
  return (
    <AlertDialog.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
      {trigger && <AlertDialog.Trigger asChild>{trigger}</AlertDialog.Trigger>}
      <AlertDialog.Portal>
        <AlertDialog.Overlay
          data-da={da}
          className="fixed inset-0 z-50 bg-da-overlay transition-opacity duration-(--da-duration) starting:opacity-0 motion-reduce:transition-none"
        />
        <AlertDialog.Content
          data-da={da}
          className="fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-da-lg bg-da-surface p-8 text-center text-da-surface-fg shadow-da-lg outline-none transition-[opacity,scale] duration-(--da-duration-slow) ease-da-emphasized starting:scale-95 starting:opacity-0 motion-reduce:transition-none"
        >
          <span aria-hidden className="mx-auto grid size-20 place-items-center rounded-full bg-da-secondary text-da-secondary-fg">
            <svg viewBox="0 0 60 60" className="w-10">
              <path d="M30 54V30c0-8 4-14 12-18" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" />
              <path d="M42 12c6 4 8 12 4 18-6-2-9-10-4-18Z" fill="currentColor" />
            </svg>
          </span>
          <AlertDialog.Title className="mt-6 font-da-display text-2xl leading-tight">{title}</AlertDialog.Title>
          <AlertDialog.Description className="mt-3 text-da-muted-fg">{description}</AlertDialog.Description>
          <div className="mt-8 grid gap-2">
            <AlertDialog.Cancel className="da-focus h-12 rounded-da-pill bg-da-primary font-medium text-da-primary-fg hover:bg-da-primary/90">
              {cancelLabel}
            </AlertDialog.Cancel>
            <AlertDialog.Action onClick={onConfirm} className="da-focus h-12 rounded-da-pill font-medium text-da-secondary-fg hover:bg-da-secondary">
              {confirmLabel}
            </AlertDialog.Action>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

export default ConfirmDialog;