import { X } from 'lucide-react';
import '../styles/ErrorDialog.css';

interface ErrorDialogProps {
  title: string;
  message: string;
  onClose: () => void;
}

export function ErrorDialog({ title, message, onClose }: ErrorDialogProps) {
  return (
    <div className="error-dialog-overlay" onClick={onClose}>
      <div className="error-dialog" onClick={(e) => e.stopPropagation()}>
        <div className="error-dialog-header">
          <h2>{title}</h2>
          <button className="close-btn" onClick={onClose}>
            <X size={16} />
          </button>
        </div>
        <div className="error-dialog-content">
          <p>{message}</p>
        </div>
        <div className="error-dialog-footer">
          <button className="error-dialog-btn" onClick={onClose}>
            确定
          </button>
        </div>
      </div>
    </div>
  );
}