'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

import { SidebarMenuButton, SidebarMenuItem } from '@kit/ui/sidebar';
import { cn, isRouteActive } from '@kit/ui/utils';

export function DocsNavLink({
  label,
  url,
  children,
}: React.PropsWithChildren<{ label: string; url: string }>) {
  const currentPath = usePathname();
  const isCurrent = isRouteActive(url, currentPath);

  return (
    <SidebarMenuItem>
      <SidebarMenuButton
        render={<Link href={url} />}
        isActive={isCurrent}
        className={cn('text-secondary-foreground transition-all')}
      >
        <span className="block max-w-full truncate">{label}</span>

        {children}
      </SidebarMenuButton>
    </SidebarMenuItem>
  );
}