import ArrowDownF from "@/components/icons/ArrowDownF"
import { Button } from "@mui/material"

function HeadMenu({ title, name, isOpen, changeMenu }) {
    return (
        <Button
            className="!flex lg:!hidden !items-center !justify-between !w-full !py-[8px] !px-[4px] !border !border-solid !border-transparent !rounded-bl-none !rounded-br-none !border-b-[#E5E5E5]"
            onClick={() => changeMenu(name)}
        >
            <p className="text-[#262866] text-[14px] font-medium">{title}</p>
            <div className={`
                transition-all duration-500
                ${isOpen ? 'rotate-180' : 'rotate-0'}
            `}>
                <ArrowDownF />
            </div>
        </Button>
    )
}

export default HeadMenu