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

function MenuLink({
  children,
  highlighted = true,
  className,
  ...props
}: PropsWithChildren<NavLinkProps & { highlighted?: boolean }>) {
  return (
    <NavLink
      {...props}
      className={(props) => {
        const baseClasses = "outline-none";
        const classNameValue =
          typeof className === "function" ? className(props) : className;
        return clsx(baseClasses, classNameValue);
      }}
    >
      {({ isActive }) => (
        <Button variant={isActive && highlighted ? "cta" : "primary"}>
          {children}
        </Button>
      )}
    </NavLink>
  );
}

export default MenuLink;
