import { Link, type LinkProps } from "@tanstack/react-router";
import { cn } from "@/lib/utils";

/**
 * NavLink — item de nav du sidebar / tab bar.
 * État actif : bord gauche rubis (desktop) ou label rubis (tab bar).
 * Pas de bg plein quand inactif, le sidebar reste calme.
 */
type Variant = "sidebar" | "tab-bar";

type NavLinkProps = Omit<LinkProps, "children"> & {
  icon: React.ReactNode;
  label: string;
  variant?: Variant;
  className?: string;
};

export function NavLink({ icon, label, variant = "sidebar", className, ...linkProps }: NavLinkProps) {
  const isSidebar = variant === "sidebar";
  return (
    <Link
      {...linkProps}
      activeOptions={{ exact: linkProps.to === "/" }}
      className={cn(
        "group relative flex items-center transition-colors duration-150",
        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rubis-glow",
        isSidebar
          ? "gap-3 rounded-default px-3 py-2.5 text-[14px] font-medium text-ink-2 hover:text-ink hover:bg-cream"
          : "flex-1 flex-col gap-0.5 py-2 text-[10.5px] font-semibold text-ink-3 hover:text-ink",
        className,
      )}
      activeProps={{
        className: isSidebar
          ? "text-rubis bg-cream shadow-soft"
          : "text-rubis",
      }}
    >
      {/* Marqueur rubis vertical sur le sidebar quand actif */}
      {isSidebar && (
        <span
          aria-hidden="true"
          className={cn(
            "absolute left-0 top-1/2 h-5 w-[3px] -translate-y-1/2 rounded-r-full bg-rubis",
            "opacity-0 transition-opacity duration-150",
            "group-aria-[current=page]:opacity-100",
          )}
        />
      )}
      <span
        className={cn(
          "shrink-0",
          isSidebar ? "text-ink-3 group-aria-[current=page]:text-rubis" : "text-current",
        )}
      >
        {icon}
      </span>
      <span className={cn(isSidebar ? "" : "leading-none")}>{label}</span>
    </Link>
  );
}
