'use client';

type MenuBurgerButtonProps = {
    state: boolean;
    onStateChange?: (value: boolean) => void;
};

export const MenuBurgerButton = ({
    state,
    onStateChange,
}: MenuBurgerButtonProps) => {
    state = state ?? false;

    // This function is called when the button is clicked
    const handleClick = () => {
        if (onStateChange) onStateChange(!state);
    };

    return (
        <div
            className='flex flex-col md:hidden w-10 h-10 justify-center items-center cursor-pointer relative'
            onClick={handleClick}
        >
            <span
                className={`w-8 h-[4px] bg-primary rounded transition-all duration-200 ${
                    state ? 'opacity-0' : 'opacity-100'
                }`}
            />
            <span
                className={`absolute w-8 h-[4px] bg-primary rounded transition-all duration-200 ${
                    state ? 'rotate-45' : '-translate-y-[10px]'
                }`}
            />
            <span
                className={`absolute w-8 h-[4px] bg-primary rounded transition-all duration-200 ${
                    state ? '-rotate-45' : 'translate-y-[10px]'
                }`}
            />
        </div>
    );
};