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
                fixed h-screen w-full z-50 top-[80px] 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]"></span>
                    )}
                </li>
            ))}
        </ul>
    )
}

export default Menu