import Link from "next/link";
import { LinkTypeItem } from "../_lib/types";
import Logo from "./Logo";

export default function SiderNav({ linkList }: { linkList: LinkTypeItem[] }) {
    return (
        <div className="w-[220px] flex flex-col gap-y-2 fixed left-0 top-0 h-[100vh]  bg-[#F9F9F9]">
            <div>
                <Logo />
            </div>
            <nav className="flex flex-col px-1">
                {
                    linkList.map((item) => {
                        return (
                            item?.href ?
                                <Link className="cursor-pointer py-3 flex gap-x-2 items-center hover:bg-[#E0E0E0] rounded pl-3 text-[#515C6B] hover:text-[#5961F9] text-[14px]" href={item.href} key={item.id}>
                                    {
                                        item.icon
                                    }
                                    <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}>
                                    {
                                        item.icon
                                    }
                                    <span>{item.label}</span>
                                </div>

                        )
                    })
                }
            </nav>

        </div >
    )
}