"use client"
import Image from "next/image";
import { icons } from "#/assets/icons"
import NavItem from "./navItem";
import { useState } from "react";


export default function Sidebar() {

  const [activeItem, setActiveItem] = useState("home")

  const handleNavMenu = (item:string) => {
    setActiveItem(item)
    console.log("active: ", item);
    
  }


  return (
    <>
      <div className="sidebar r-m-0 d-flex flex-column pt-[25px] max-w-[90px] h-[100vh] relative ">
        <div className="logo r-flex-center px-[20px] ">
          <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="#" iconSrc={icons.homeIcon} label="Home" isNavHome={true} isActive={activeItem === "home"} onClick={() => handleNavMenu("home") } />
          <NavItem link="#" iconSrc={icons.companiesIcon} label="Organizations" isActive={activeItem === "organizations"} onClick={() => handleNavMenu("organizations") } />
          <NavItem link="#" iconSrc={icons.userGroup} label="Admins" isActive={activeItem === "admins"} onClick={() => handleNavMenu("admins") } />
        </div>
        <div className="logout absolute bottom-[40px] left-[28px]">
          <button type="button" className="cursor-pointer">
            <Image src={icons.logout} alt="Logout" />
          </button>
        </div>
      </div>
    </>
  )
}