import { useEffect } from "react";
import type { ReactNode } from "react";

type Props = {
  open: boolean;
  onClose: () => void;
  title?: string;
  children: ReactNode;
};

export default function Modal({ open, onClose, title, children }: Props) {
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
    if (open) document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;
  return (
    <div className="fixed inset-0 z-[100]">
      <div className="absolute inset-0 bg-black/60" onClick={onClose} />
      <div role="dialog" aria-modal="true" className="absolute inset-0 flex items-center justify-center p-4">
        <div className="glass max-w-3xl w-full p-4 md:p-6">
          <div className="flex items-center justify-between mb-3">
            <h3 className="text-lg md:text-xl font-semibold">{title}</h3>
            <button onClick={onClose} aria-label="Close" className="px-2 py-1 glow">✕</button>
          </div>
          <div className="prose prose-invert max-w-none">{children}</div>
        </div>
      </div>
    </div>
  );
}