'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
export function Modal({ open, onClose, title, children, actions }) {
    useEffect(() => {
        if (!open)
            return;
        function handleKey(e) {
            if (e.key === 'Escape')
                onClose();
        }
        document.addEventListener('keydown', handleKey);
        return () => document.removeEventListener('keydown', handleKey);
    }, [open, onClose]);
    if (!open)
        return null;
    return (_jsxs("div", { className: "fixed inset-0 z-[60] flex items-center justify-center", children: [_jsx("div", { className: "fixed inset-0 bg-black/50", onClick: onClose, role: "presentation" }), _jsxs("div", { className: "relative z-10 w-full max-w-lg rounded-lg border border-[var(--border)] bg-[var(--card)] shadow-xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[var(--border)] px-6 py-4", children: [_jsx("h2", { className: "text-lg font-semibold", children: title }), _jsx("button", { onClick: onClose, className: "rounded-md p-1 hover:bg-[var(--accent)]", children: _jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("div", { className: "px-6 py-4", children: children }), actions && (_jsx("div", { className: "flex justify-end gap-2 border-t border-[var(--border)] px-6 py-4", children: actions }))] })] }));
}
//# sourceMappingURL=Modal.js.map