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>
    )
}