import { Button } from "@mui/material"

function ButtonMenu({ isActive, setIsActive }) {
    return (
        <Button
            onClick={() => setIsActive(!isActive)}
            className="!py-[6px] !px-[2px] !flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
        >
            <span
                className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
                    ${isActive ? '-rotate-45 w-1/2 translate-x-[60%] translate-y-[8px]' : 'rotate-0 w-full'}
                `}
            ></span>
            <span
                className={`w-full min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
                    ${isActive && 'rotate-180'}
                `}
            ></span>
            <span
                className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
                    ${isActive ? 'rotate-45 w-1/2 translate-x-[60%] translate-y-[-8px]' : 'rotate-0 w-full'}
                `}
            ></span>
        </Button>
    )
}

export default ButtonMenu