"use client";

import SidebarArrow from "@/shared/icons/sidebar/sidebar-arrow.svg";

import { useState } from "react";
import SidebarList from "./sidebar-list";
import { cn } from "@/lib/utils";
import { sidebarData, TSidebarData } from "./sidebar-list/data";
import Link from "next/link";
import SidebarLogo from "./sidebar-logo/sidebar-logo";

const Sidebar = () => {
  const [openSidebar, setOpenSidebar] = useState(true);
  const [activeItem, setActiveItem] = useState<string | null>(null);

  const handleCloseSidebar = () => setOpenSidebar(prev => !prev);
  const handleItemClick = (name: string) => {
    setActiveItem(prev => prev === name ? null : name);
  };

  return (
    <div className={cn(`bg-neutral-white h-dvh w-fit rounded-2xl py-6 px-4 shadow-[0_16px_44px_0_#00000012] transition-all duration-400 ease-in-out sticky top-[10px]`, {
      "w-[22%] p-6": openSidebar
    })}>
      <div className="flex flex-col gap-6">
        <div className="pb-[15px] relative">
          <SidebarLogo openSidebar={openSidebar} />
          <div className="rounded-full border border-[#CACACA] flex items-center justify-center bg-neutral-white absolute top-0 right-[-32px] cursor-pointer w-6 h-6">
            <SidebarArrow className={`${openSidebar ? "rotate-90" : "-rotate-90"} transition-transform duration-400 ease-in-out`} onClick={handleCloseSidebar} />
          </div>
        </div>
        <div className={cn("flex flex-col gap-2", {
          "items-center": !openSidebar
        })}>
          {sidebarData.map((sidebarItem: TSidebarData) => (
            <SidebarList
              key={sidebarItem.name}
              openSidebar={openSidebar}
              sidebarItem={sidebarItem}
              activeItem={activeItem}
              onItemClick={handleItemClick}
            />
          ))}
        </div>
      </div>
    </div>
  )
}

export default Sidebar