import { listNav } from "@/constans";
import { Button } from "@mui/material";
import Link from "next/link";
import { isActiveURL } from "@/helper";

function Col({ isActive, name }) {
  return (
    <div className="flex lg:hidden">
      <div
        className={` fixed pb-[31px] pt-[64px] pl-[24px]  padding-responsive top-0 w-[85%] z-10 h-screen bg-[#FAFAFA] transition-all duration-500 ${isActive ? "right-0" : "-right-[85%]"} `}
      >
        <ul className="flex flex-col items-start justify-center gap-[30px] mt-[38px]">
          {listNav.map((nav) => (
            <li key={nav.id} className="w-full">
              <Link href={nav.link} className="w-full">
                <Button
                  className={` !h-10 ${ isActiveURL( nav.link.replace("/", ""), name, ) ? "!text-[#526CAC] !bg-[rgba(199,_206,_244,_0.30)]" : "!text-[#525252]" } !text-[16px] !w-full !flex !justify-start !font-medium !py-2.5 !px-4 `}
                >
                  {nav.name}
                </Button>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default Col;
