"use client";
import Link from "next/link";
import { LinkTypeItem } from "../_lib/types";
import Logo from "./Logo";
import clsx from "clsx";
import { usePathname } from "next/navigation";
import { useAtom } from "jotai";
import { linkTypeAtom } from "../_lib/atom";
import { LinkType } from "../_lib/data/linkType";

export default function SiderNav({ linkList }: { linkList: LinkType[] }) {
    const pathname = usePathname()
    const [, setSelectType] = useAtom(linkTypeAtom)
    return (
        <div className="w-[220px] flex flex-col gap-y-2 fixed left-0 top-0 h-[100vh]  bg-[#F9F9F9]">
            <div className="bg-white shadow-sm">
                <Logo />
            </div>
            <nav className="flex flex-col py-1">
                {
                    linkList.map((item) => {
                        return (
                            item?.href ?
                                <Link className={clsx("cursor-pointer py-3 flex gap-x-2 items-center hover:bg-[#E0E0E0] rounded pl-3  hover:text-[#5961F9] text-[14px]",
                                    pathname === item.href ? "text-[#5961F9]" : "text-[#515C6B]")
                                } href={item.href} key={item._id}>
                                    {
                                        item.iconElement
                                    }
                                    <span>{item.label}</span>
                                </Link> :
                                <div className="cursor-pointer py-3 flex gap-x-2 items-center hover:bg-[#E0E0E0] rounded pl-3 text-[#515C6B] hover:text-[#5961F9] text-[14px]" key={item._id}
                                    onClick={() => {
                                        setSelectType(item._id)
                                    }}
                                >
                                    <img src={item.icon as string} className="w-[20px] h-[20px] object-cover"></img>

                                    <span>{item.label}</span>
                                </div>

                        )
                    })
                }
            </nav>

        </div >
    )
}