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.name}</p>
      <div
        className={` transition-all duration-500 ${isOpen ? "rotate-180" : "rotate-0"} `}
      >
        <ArrowDownF />
      </div>
    </Button>
  );
}

export default HeadMenu;