components/DeleteModal.tsx

import React from 'react';

interface DeleteModalProps {
  isOpen: boolean;
  type?: 'single' | 'all';
  title?: string;
  message?: string;
  onClose: () => void;
  onConfirm: () => void;
}

const DeleteModal: React.FC<DeleteModalProps> = ({ 
  isOpen, 
  type = 'single', 
  title, 
  message, 
  onClose, 
  onConfirm 
}) => {
  if (!isOpen) return null;

  // Default texts based on type if custom ones aren't provided
  const displayTitle = title || (type === 'all' ? 'پاکسازی کل تاریخچه' : 'حذف فایل');
  const displayMessage = message || (type === 'all' 
    ? 'آیا مطمئن هستید؟ تمام سوابق حذف می‌شوند و قابل بازگشت نیستند.' 
    : 'آیا از حذف این فایل اطمینان دارید؟');

  return (
    <div className="fixed inset-0 z-[110] flex items-center justify-center p-4">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity animate-[fadeIn_0.3s_ease-out]"
        onClick={onClose}
      ></div>

      {/* Modal Card */}
      <div className="relative bg-white rounded-[2.5rem] w-full max-w-[320px] p-8 shadow-2xl animate-[scaleIn_0.4s_cubic-bezier(0.175,0.885,0.32,1.275)] overflow-hidden text-center mx-auto border border-gray-100">
        
        {/* Animated Icon Container */}
        <div className="w-20 h-20 mx-auto bg-red-50 rounded-full flex items-center justify-center mb-6 relative">
          <div className="absolute inset-0 bg-red-200/30 rounded-full animate-ping"></div>
          <div className="w-14 h-14 bg-red-100 rounded-full flex items-center justify-center relative z-10">
            <i className="fas fa-trash-can text-2xl text-red-500 animate-[bounce_2s_infinite]"></i>
          </div>
        </div>

        {/* Text Content */}
        <h3 className="text-xl font-black text-gray-800 mb-3">
          {displayTitle}
        </h3>
        
        <p className="text-gray-500 text-sm mb-8 leading-relaxed px-2 font-medium">
          {displayMessage}
        </p>

        {/* Action Buttons */}
        <div className="flex gap-3">
          <button 
            onClick={onClose}
            className="flex-1 py-4 rounded-2xl font-bold text-sm text-gray-500 bg-gray-100 hover:bg-gray-200 transition-all active:scale-95"
          >
            انصراف
          </button>
          <button 
            onClick={onConfirm}
            className="flex-1 py-4 rounded-2xl font-bold text-sm text-white bg-gradient-to-r from-red-500 to-rose-600 hover:from-red-600 hover:to-rose-700 shadow-lg shadow-red-200 transition-all transform active:scale-95"
          >
            حذف کن
          </button>
        </div>

      </div>
      
      <style>{`
        @keyframes scaleIn {
          from { opacity: 0; transform: scale(0.8) translateY(20px); }
          to { opacity: 1; transform: scale(1) translateY(0); }
        }
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
      `}</style>
    </div>
  );
};

export default DeleteModal;