import { NavLink, type NavLinkProps } from "react-router";
import Button from "./Button";
import type { PropsWithChildren } from "react";

function MenuLink({
  children,
  highlighted = true,
  ...props
}: PropsWithChildren<NavLinkProps & { highlighted?: boolean }>) {
  return (
    <NavLink {...props}>
      {({ isActive }) => (
        <Button variant={isActive && highlighted ? "cta" : "primary"}>
          {children}
        </Button>
      )}
    </NavLink>
  );
}

export default MenuLink;
