import type { LinkProps } from "@tanstack/react-router";
import { Link } from "@tanstack/react-router";
import type { ComponentProps } from "react";

interface NavLinkProps extends Omit<LinkProps, "children"> {
  label: string;
  icon?: React.ReactNode;
}

export default function NavLink({ label, icon, ...props }: NavLinkProps) {
  return (
    <Link
      {...props}
      className={({ isActive }) => 
        `flex items-center gap-2 px-3 py-2 rounded-md transition-colors cursor-pointer ${
          isActive 
            ? "bg-zinc-100 font-medium text-zinc-900" 
            : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900"
        }`
      }
    >
      {icon && <span className="flex-shrink-0">{icon}</span>}
      <span>{label}</span>
    </Link>
  );
}