import type { ComponentType, SVGProps } from 'react';
import { NavLink } from 'react-router-dom';

type IconType = ComponentType<SVGProps<SVGSVGElement>>;

type SidebarNavItemProps = {
    to: string;
    label: string;
    icon: IconType;
    collapsed: boolean;
    onClick?: () => void;
};

export function SidebarNavItem({
    to,
    label,
    icon: Icon,
    collapsed,
    onClick,
}: Readonly<SidebarNavItemProps>) {
    const layoutClass = collapsed
        ? 'mx-auto w-8 justify-center px-0'
        : 'px-2 lg:w-full lg:justify-start';

    return (
        <NavLink
            to={to}
            onClick={onClick}
            className={({ isActive }) =>
                `inline-flex h-8 items-center rounded-lg text-sm font-medium transition ${layoutClass} ${
                    isActive ? 'ui-accent-active' : 'ui-body-secondary hover:bg-zinc-500/15'
                }`
            }
        >
            <Icon className="h-4 w-4 shrink-0" />
            {!collapsed ? (
                <span className="ml-2 truncate leading-none">{label}</span>
            ) : (
                <span className="ml-2 lg:hidden">{label}</span>
            )}
        </NavLink>
    );
}