import Link from "next/link";
import { DashboardIcon, HomeIcon, TableIcon } from "../../icons/sidebar-icon";
import { useSidebar } from "./sidebar-context";
import { Tooltip } from "@nextui-org/react";

export default function ClosedSidebarIcon(props: {
  icon: string;
  isActive: boolean;
  childMenu: any;
  path: string;
  title: string;
}) {
  const { isOpen, toggleSidebar } = useSidebar();

  const { icon, isActive, childMenu, path, title } = props;
  const renderIcon = () => {
    switch (icon) {
      case "dashboard":
        return <DashboardIcon />;
      case "menu1":
        return <HomeIcon />;
      case "table":
        return <TableIcon />;
      default:
        return null; // Tidak ada ikon yang sesuai
    }
  };
  return (
    <Tooltip content={title} placement="right" delay={0} closeDelay={0}>
      {childMenu.length < 1 ? (
        <Link
          href={path}
          className={`w-fit rounded-lg p-1 flex items-center ${
            isActive
              ? "bg-[#11181c] dark:bg-white text-[#fafafa] dark:text-black"
              : "text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 hover:dark:text-zinc-300"
          }`}
        >
          {renderIcon()}
        </Link>
      ) : (
        <a
          onClick={toggleSidebar}
          className={`cursor-pointer w-fit rounded-lg p-1 flex items-center ${
            isActive
              ? "bg-[#11181c] dark:bg-white text-[#fafafa] dark:text-black"
              : "text-zinc-600 dark:text-zinc-400 hover:text-zinc-800 hover:dark:text-zinc-300"
          }`}
        >
          {renderIcon()}
        </a>
      )}
    </Tooltip>
  );
}