import {Icon, IconName} from "./Icon";
import { useOnSubpath } from "@/lib/useOnSubpath";
import { OutsideCorner } from "./OutsideCorner";
import {Link} from "@tanstack/react-router";
import React from "react";

type SideBarItemContent = {
    link: string;
    activeLink: string;
    icon?: IconName;
    title: string;
}

type SidebarItemProps = SideBarItemContent & {
    isFirst: boolean;
};

export function SidebarItem({
    link,
    icon,
    title,
    isFirst,
    activeLink
}: SidebarItemProps) {
    const isActive = useOnSubpath(activeLink);
    return (
        <Link
            to={link}
            classname={`relative h-18 w-full ${isActive ? "pl-2": "px-2"}`}
            >
                <div className={`text-md relative z-10 flex h-full w-full items-center justify-center gap-2 ${isActive ? "rounded-l-lg bg-white pr-2": "rounded-lg bg-neutral-100"}`}>
                    {icon && <Icon name={icon} />}
                    {title}
                </div>
                {isActive && <OutsideCorner rightTop={!isFirst} rightBottom={true} />}
            </Link>
    );
}

export function SidebarLayout() {
    return (
        <h1>Hello World</h1>
    )
}