import { useState } from "react";

const Cuadrado = ({ valor, alHacerClick }) => {
    const [showMenu, setShowMenu] = useState(false);

    const handleMouseEnter = () => {
        setShowMenu(true);
    };

    const handleMouseLeave = () => {
        setTimeout(() => {
            if (!document.querySelector('.menu')?.contains(document.activeElement)) {
                setShowMenu(false);
            }
        }, 100);
    };

    const handleSelect = (valor) => {
        alHacerClick(valor);
        setShowMenu(false); 
    };

    return (
        <div
            className="relative w-16 h-16"
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            <button
                className="shadow-xl w-full h-full text-black border border-gray-500 text-2xl font-extrabold flex items-center border-4 border-black justify-center bg-blue-900 rounded-xl"
                onClick={() => setShowMenu(true)}
                disabled={valor !== ''}
            >
                {valor}
            </button>
            {showMenu && (
                <div className="menu absolute top-0 right-0 bg-white border border-gray-500 shadow-md p-2">
                    <button
                        className="block w-full text-center text-black p-1 hover:bg-gray-200"
                        onClick={() => handleSelect('X')}
                    >
                        X
                    </button>
                    <button
                        className="block w-full text-center text-black p-1 hover:bg-gray-200"
                        onClick={() => handleSelect('O')}
                    >
                        O
                    </button>
                </div>
            )}
        </div>
    );
};

export default Cuadrado;