"use client";
import React from "react";
import { motion, AnimatePresence } from "motion/react";
import { Trash2, AlertTriangle, X } from "lucide-react";

interface DeleteConfirmModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  message: string;
}

export default function DeleteConfirmModal({ isOpen, onClose, onConfirm, title, message }: DeleteConfirmModalProps) {
  return (
    <AnimatePresence>
      {isOpen && (
        <div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="absolute inset-0 bg-medical-gray-900/60 backdrop-blur-md"
          />
          <motion.div 
            initial={{ opacity: 0, scale: 0.9, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9, y: 20 }}
            className="bg-white w-full max-w-sm rounded-[2.5rem] relative z-10 shadow-2xl p-8 text-center font-vazir"
            dir="rtl"
          >
            <div className="w-16 h-16 bg-red-50 rounded-2xl flex items-center justify-center text-red-500 mx-auto mb-6">
               <Trash2 className="w-8 h-8" />
            </div>
            
            <h3 className="text-xl font-black text-medical-gray-900 mb-2 italic">{title}</h3>
            <p className="text-sm font-bold text-medical-gray-500 leading-relaxed mb-8">{message}</p>

            <div className="flex gap-4">
               <button 
                 onClick={onClose}
                 className="flex-1 py-4 bg-medical-gray-50 text-medical-gray-400 rounded-2xl font-black text-sm hover:bg-medical-gray-100 transition-all"
               >
                 خیر، بماند
               </button>
               <button 
                 onClick={() => {
                   onConfirm();
                   onClose();
                 }}
                 className="flex-1 py-4 bg-red-500 text-white rounded-2xl font-black text-sm hover:bg-red-600 transition-all shadow-lg shadow-red-500/20"
               >
                 بله، حذف شود
               </button>
            </div>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
}