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

type NavLinkProps = { to: string; children: React.ReactNode };

const NavLink = ({ to, children }: NavLinkProps) => {
  return (
    <Link
      to={to}
      className="relative text-sm font-medium text-(--color-text-muted) transition-colors duration-200
        hover:text-(--color-primary)
        [&.active]:text-(--color-primary)
        [&.active]:after:absolute
        [&.active]:after:-bottom-1
        [&.active]:after:left-0
        [&.active]:after:w-full
        [&.active]:after:h-0.5
        [&.active]:after:bg-(--color-accent)
        [&.active]:after:rounded-full
        [&.active]:after:content-['']"
    >
      {children}
    </Link>
  );
};

export default NavLink;