'use client';

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

export default function Modal({
  title, onClose, children, wide = false,
}: { title: string; onClose: () => void; children: React.ReactNode; wide?: boolean }) {
  // Close on Escape — small polish, but exactly what a real modal should do.
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);

  return (
    <div className="fixed inset-0 z-40 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/30 animate-fadeIn" onClick={onClose} />
      <div className={`relative bg-white rounded-2xl shadow-xl border border-brand-border p-5 w-full ${wide ? 'max-w-2xl' : 'max-w-md'} animate-scaleIn`}>
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-sm font-bold">{title}</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-brand-charcoal">
            <X size={18} />
          </button>
        </div>
        {children}
      </div>
    </div>
  );
}