import Link from "next/link";
import type { ComponentType } from "react";
import type { LucideProps } from "lucide-react";

import { cn } from "@/lib/utils";

type NavItemProps = {
  href: string;
  label: string;
  icon: ComponentType<LucideProps>;
  active?: boolean;
  badge?: number | string;
};

export function NavItem({
  href,
  label,
  icon: Icon,
  active = false,
  badge,
}: NavItemProps) {
  return (
    <Link
      href={href}
      className={cn(
        "relative flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[13.5px] font-medium text-[var(--ink-soft)] transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--focus-ring)]",
        "hover:bg-[var(--surface-2)] hover:text-[var(--ink)]",
        active &&
          "bg-[var(--accent-soft)] font-semibold text-[var(--accent-deep)] before:absolute before:left-[-14px] before:top-1.5 before:h-[calc(100%-12px)] before:w-[3px] before:rounded-full before:bg-[var(--accent)]",
      )}
    >
      <Icon className="h-4 w-4 shrink-0 [stroke-width:1.7]" />
      <span className="min-w-0 flex-1 truncate">{label}</span>
      {badge ? (
        <span className="rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-2 py-0.5 text-[11px] font-semibold text-[var(--ink-muted)]">
          {badge}
        </span>
      ) : null}
    </Link>
  );
}