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

function Menu({ value, open, setOpen, listTab, handleChange }) {
  return (
    <ul
      className={`
        flex bg-[#FAFAFA] flex-col justify-start items-start dark:bg-[#222433]
        fixed h-screen w-full z-50 top-[60px] pt-[20px] transition-all duration-500
        ${open ? "right-0" : "-right-full"}
      `}
    >
      {listTab.map((item, idx) => (
        <li key={idx} className="w-[calc(100%-32px)] mx-[16px]">
          <Button
            onClick={() => {
              handleChange(_, idx);
              setOpen(false);
            }}
            className="!flex !p-2 !items-center !justify-between !w-full"
          >
            <p
              className={`
                                text-[16px] transition-all duration-500
                                ${
                                  value === idx
                                    ? "text-[#5559CE] font-bold"
                                    : "text-[#7E7E7E] font-normal"
                                }
                            `}
            >
              {item}
            </p>
            <ArrowLeftPH active={value === idx} />
          </Button>
          {listTab.length > idx + 1 && (
            <span className="my-[12px] block h-px w-full bg-[#EFEFEF] dark:bg-[#343645]"></span>
          )}
        </li>
      ))}
    </ul>
  );
}

export default Menu;