import React, { ReactNode } from 'react';
import './GameModal.css';

interface GameModalProps {
    title?: ReactNode;
    onClose: () => void;
    children: ReactNode;
    className?: string; // For specific styling overrides
    footer?: ReactNode;
}

export const GameModal: React.FC<GameModalProps> = ({ title, onClose, children, className = '', footer }) => {
    return (
        <div className="game-modal-overlay" onClick={(e) => {
            if (e.target === e.currentTarget) onClose();
        }}>
            <div className={`game-modal-container ${className}`}>
                <div className="game-modal-header">
                    <div className="game-modal-title">{title}</div>
                    <button className="game-modal-close-btn" onClick={onClose}>&times;</button>
                </div>

                <div className="game-modal-content">
                    {children}
                </div>

                {footer && (
                    <div className="game-modal-footer">
                        {footer}
                    </div>
                )}
            </div>
        </div>
    );
};
