import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "./ui/dialog";

export interface ConfirmDeleteDialogProps {
  open: boolean;
  itemName: string;
  onConfirm: () => void;
  onCancel: () => void;
}

// پاپ‌آپ تأیید حذف چیپ — متن دقیق طبق درخواست کاربر
// دکمه‌ی قرمز (حذف) سمت راست، دکمه‌ی آبی (انصراف) سمت چپ
export function ConfirmDeleteDialog({ open, itemName, onConfirm, onCancel }: ConfirmDeleteDialogProps) {
  return (
    <Dialog open={open} onOpenChange={(o) => !o && onCancel()}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="text-[16px] font-bold">آیا از حذف مورد زیر مطمئن هستید؟</DialogTitle>
        </DialogHeader>
        <div className="rounded-lg border border-line bg-slate-bg px-3 py-2.5 text-center text-[13.5px] font-semibold">
          {itemName}
        </div>
        <div className="mt-1 flex items-center justify-between gap-2">
          <button
            type="button"
            className="rounded-lg bg-red px-4 py-2 text-sm font-medium text-white transition-colors hover:brightness-95"
            onClick={onConfirm}
          >
            می خواهم حذف کنم
          </button>
          <button
            type="button"
            className="rounded-lg bg-[#1d4ed8] px-4 py-2 text-sm font-medium text-white transition-colors hover:brightness-95"
            onClick={onCancel}
          >
            تغییری نمی دهم
          </button>
        </div>
      </DialogContent>
    </Dialog>
  );
}