components/ConfirmModal.tsx

import React from 'react';
import { AlertTriangle, Info } from 'lucide-react';

interface ConfirmModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title?: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
  isDanger?: boolean;
  type?: 'confirm' | 'alert'; 
}

export const ConfirmModal: React.FC<ConfirmModalProps> = ({ 
  isOpen, onClose, onConfirm, title = "提示", message, 
  confirmText = "确定", cancelText = "取消", isDanger = false, type = 'confirm' 
}) => {
  if (!isOpen) return null;

  const handleConfirm = () => {
      onConfirm();
      onClose();
  };

  return (
    <div className="fixed inset-0 bg-black/60 z-[99999] flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in">
      <div className="bg-white rounded-2xl shadow-2xl max-w-sm w-full overflow-hidden animate-in zoom-in-95 border border-gray-100">
        <div className="p-6 text-center">
          <div className={`mx-auto w-12 h-12 rounded-full flex items-center justify-center mb-4 ${isDanger ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600'}`}>
            {isDanger ? <AlertTriangle size={24} /> : <Info size={24} />}
          </div>
          <h3 className="text-lg font-bold text-gray-900 mb-2">{title}</h3>
          <p className="text-sm text-gray-500 leading-relaxed whitespace-pre-wrap">{message}</p>
        </div>
        <div className="bg-gray-50 px-6 py-4 flex gap-3">
          {type === 'confirm' && (
            <button 
              onClick={onClose}
              className="flex-1 py-2.5 rounded-xl text-sm font-bold text-gray-600 hover:bg-gray-200 transition-colors border border-gray-200 bg-white"
            >
              {cancelText}
            </button>
          )}
          <button 
            onClick={handleConfirm} 
            className={`flex-1 py-2.5 rounded-xl text-sm font-bold text-white shadow-md transition-colors ${isDanger ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'}`}
          >
            {confirmText}
          </button>
        </div>
      </div>
    </div>
  );
};