"use client";
import React from "react";
// import { retrieveAvailableCategories } from "@/appEvents/categories";

interface SidebarItemProps {
  item: any;
  pageName: any;
  setPageName: React.Dispatch<React.SetStateAction<any>>;
  leftSideMenuSetter: React.Dispatch<React.SetStateAction<Array<any>>>;
}

const SidebarItem = ({
  item,
  pageName,
  setPageName,
  leftSideMenuSetter,
}: SidebarItemProps) => {
  const handleClick = () => {
    if (pageName?.title !== item.title) {
      // const availableMenu = retrieveAvailableCategories(
      //   item?.subCategories || []
      // );
      const availableMenu = item?.subCategories || [];
      if (availableMenu.length !== 0) {
        leftSideMenuSetter(availableMenu);
      }
      setPageName(item.component);
    }
  };

  // const isActive = (item: any) => {
  //   if (item.title === pageName?.title) {
  //     console.log("item.title", item.title);
  //     return item.children.some((child: any) => isActive(child));
  //   }
  //   return false;
  // };

  return (
    <>
      <div
        onClick={handleClick}
        className="h-12 group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium text-bodydark1 my-5 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4"
      >
        {item.icon}
        {item.title}
      </div>
    </>
  );
};

export default SidebarItem;