"use client"
import Image from "next/image";
import { icons } from "#/assets/icons"
import NavItem from "./navItem";
import { usePathname } from "next/navigation";
import Link from "next/link";


export default function Sidebar() {

  const pathname = usePathname();

  return (
    <>
      <div className="sidebar-holder min-w-[78px] max-w-[90px] h-[100vh] ">
        <div className="sidebar r-m-0 d-flex flex-column pt-[25px] max-w-[90px] h-[100vh] ">
          <div className="logo r-flex-center px-[19px] ">
            <Image src={icons.logo} alt="Logo" className="scale-95" />
          </div>
          <div className="nav-menu r-column-center h-max pt-[160px] r-gap-40 ">
            <NavItem link="/admin/home" iconSrc={icons.homeIcon} label="Home" isNavHome={true} isActive={(pathname === "/admin/") || (pathname === "/admin/home")} />
            <NavItem link="/admin/organizations" iconSrc={icons.companiesIcon} label="Organizations" isActive={pathname.startsWith("/admin/organizations")} />
            <NavItem link="/admin/admins" iconSrc={icons.userGroup} label="Admins" isActive={pathname.startsWith("/admin/admins")} />
          </div>
          <div className="logout absolute bottom-[40px] left-[28px]">
            <Link href="/login" className="cursor-pointer">
              <Image src={icons.logout} alt="Logout" />
            </Link>
          </div>
        </div>
      </div>
    </>
  )
}