import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect } from 'react';
import { X } from 'lucide-react';
const maxWidthClasses = {
    sm: 'max-w-sm',
    md: 'max-w-md',
    lg: 'max-w-lg',
    xl: 'max-w-xl',
    '2xl': 'max-w-2xl',
};
export function Modal({ isOpen, onClose, title, children, showCloseButton = true, closeOnBackdropClick = true, closeOnEscape = true, maxWidth = 'md', }) {
    useEffect(() => {
        if (!isOpen || !closeOnEscape)
            return;
        const handleEscape = (e) => {
            const target = e.target;
            const isInInput = target.tagName === 'INPUT' ||
                target.tagName === 'TEXTAREA' ||
                target.isContentEditable;
            if (e.key === 'Escape' || (e.key === 'q' && !isInInput)) {
                e.preventDefault();
                e.stopPropagation();
                onClose();
            }
        };
        document.addEventListener('keydown', handleEscape);
        return () => document.removeEventListener('keydown', handleEscape);
    }, [isOpen, closeOnEscape, onClose]);
    useEffect(() => {
        if (isOpen) {
            // Prevent body scroll when modal is open
            document.body.style.overflow = 'hidden';
            return () => {
                document.body.style.overflow = '';
            };
        }
    }, [isOpen]);
    if (!isOpen)
        return null;
    const handleBackdropClick = (e) => {
        if (closeOnBackdropClick && e.target === e.currentTarget) {
            onClose();
        }
    };
    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999] cursor-default", onClick: handleBackdropClick, onKeyDown: (e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                        handleBackdropClick(e);
                    }
                }, "aria-label": "Close modal" }), _jsx("div", { className: `fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[9999] w-full ${maxWidthClasses[maxWidth]} px-4`, children: _jsxs("div", { className: "bg-background border border-border rounded-lg shadow-lg", children: [(title || showCloseButton) && (_jsxs("div", { className: "flex items-center justify-between p-4 border-b border-border", children: [title && (_jsx("div", { className: "text-lg font-semibold text-foreground", children: title })), showCloseButton && (_jsx("button", { type: "button", onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors ml-auto", "aria-label": "Close", children: _jsx(X, { className: "h-5 w-5" }) }))] })), _jsx("div", { className: "p-6", children: children })] }) })] }));
}
//# sourceMappingURL=Modal.js.map