import React from 'react';
import { X } from 'lucide-react';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}

export default function Modal({ isOpen, onClose, title, children }: ModalProps) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      {/* Backdrop */}
      <div 
        className="absolute inset-0 bg-black/80 backdrop-blur-sm animate-in fade-in duration-300"
        onClick={onClose}
      />
      
      {/* Modal Content */}
      <div className="relative bg-slate-900 border border-slate-800 w-full max-w-lg rounded-[2rem] shadow-2xl animate-in zoom-in-95 fade-in duration-300 overflow-hidden">
        <div className="p-8 border-b border-slate-800 flex justify-between items-center bg-slate-800/20">
          <h3 className="text-xl font-black text-white tracking-tight italic uppercase">{title}</h3>
          <button 
            onClick={onClose}
            className="p-2 hover:bg-slate-800 text-slate-500 hover:text-white rounded-xl transition-all"
          >
            <X size={24} />
          </button>
        </div>
        
        <div className="p-8 max-h-[70vh] overflow-y-auto custom-scrollbar">
          {children}
        </div>
      </div>
    </div>
  );
}
