"use client";

import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
  IconButton,
} from "@mui/material";
import WarningAmberIcon from "@mui/icons-material/WarningAmber";
import CloseIcon from "@mui/icons-material/Close";

export default function DeleteConfirmModal({
  open,
  onClose,
  onConfirm,
  title = "آیا از حذف این مورد مطمئن هستید؟",
  description = "بعد از حذف، امکان بازگردانی وجود ندارد.",
}: {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title?: string;
  description?: string;
}) {
  return (
    <Dialog open={open} onClose={onClose} maxWidth="xs">
      <DialogTitle className="flex items-center justify-between text-slate-800">
        <span className="font-semibold">تأیید حذف</span>
        <IconButton onClick={onClose} size="small">
          <CloseIcon />
        </IconButton>
      </DialogTitle>

      <DialogContent className="flex flex-col items-center text-center space-y-3 pt-4">
        <WarningAmberIcon className="text-yellow-500" sx={{ fontSize: 50 }} />

        <Typography className="text-lg font-semibold text-slate-700">
          {title}
        </Typography>

        <Typography className="text-slate-500 text-sm leading-relaxed">
          {description}
        </Typography>
      </DialogContent>

      <DialogActions className="flex justify-between px-4 pb-3 mt-2">
        <Button
          onClick={onClose}
          variant="outlined"
          sx={{
            borderRadius: "8px",
            color: "#475569",
            borderColor: "#cbd5e1",
            "&:hover": {
              backgroundColor: "#f1f5f9",
              borderColor: "#94a3b8",
            },
          }}
        >
          لغو
        </Button>

        <Button
          onClick={onConfirm}
          variant="contained"
          sx={{
            borderRadius: "8px",
            backgroundColor: "#dc2626",
            "&:hover": { backgroundColor: "#b91c1c" },
          }}
        >
          حذف آیتم
        </Button>
      </DialogActions>
    </Dialog>
  );
}