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;