import { Link } from "react-router-dom";

import { SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";

export interface MenuItemDescriptor {
  title: string;
  icon: React.ComponentType<{ className?: string }>;
  url: string;
}

interface ApplicantSidebarMenuItemProps {
  item: MenuItemDescriptor;
  pathname: string;
}

export function ApplicantSidebarMenuItem({ item, pathname }: ApplicantSidebarMenuItemProps) {
  const Icon = item.icon;
  const active = pathname === item.url;

  return (
    <SidebarMenuItem>
      <SidebarMenuButton asChild isActive={active} tooltip={item.title}>
        <Link to={item.url} className="flex mt-4 w-full items-center gap-2">
          <Icon className="h-4 w-4 shrink-0" />
          <span className="truncate">{item.title}</span>
        </Link>
      </SidebarMenuButton>
    </SidebarMenuItem>
  );
}
