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

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

export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children, maxWidth = 'max-w-2xl' }) => {
    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-2.5 sm:p-4">
            <div className={`bg-surface rounded-2xl sm:rounded-3xl shadow-[var(--shadow-premium)] w-full ${maxWidth} max-h-[92vh] flex flex-col animate-in fade-in zoom-in duration-200 border border-border/40 relative overflow-hidden`}>
                <div className="flex justify-between items-center p-4 sm:p-5 border-b border-border">
                    <h2 className="text-lg sm:text-xl font-bold text-text-main truncate pr-2">{title}</h2>
                    <button onClick={onClose} className="p-2 text-text-secondary hover:bg-surface-hover hover:text-text-main rounded-lg transition-colors shrink-0" aria-label="Fechar modal">
                        <X className="w-5 h-5" />
                    </button>
                </div>
                <div className="p-4 sm:p-6 overflow-y-auto">
                    {children}
                </div>
            </div>
        </div>
    );
};