import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "../ui/alert-dialog";


type DiscardChangesDialogProps = {
  description: string;
  onKeepEditing: () => void;
  onDiscard: () => void;
};

// The admin-v2 dirty-close choice. Render it only while asking: a reopened Radix dialog can
// re-append its overlay after content still leaving, which puts the overlay over its own buttons.
const DiscardChangesDialog = ({ description, onKeepEditing, onDiscard }: DiscardChangesDialogProps) => (
  <AlertDialog open onOpenChange={(open) => !open && onKeepEditing()}>
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Discard unsaved changes?</AlertDialogTitle>
        <AlertDialogDescription>{description}</AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel className="btn btn-amber">Keep editing</AlertDialogCancel>
        <button type="button" className="btn btn-red" onClick={onDiscard}>
          Discard changes
        </button>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
);

export default DiscardChangesDialog;