import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import type { NavigationMenuLinkProps } from "./navigation-menu.props";

/**
 * An anchor link for use inside NavigationMenu. Marks itself active via
 * data-active when the active prop is true.
 */
export function NavigationMenuLink(props: NavigationMenuLinkProps): JSX.Element {
  const [local, rest] = splitProps(props, ["active", "children"]);

  return (
    <a
      data-scope="navigation-menu"
      data-part="link"
      role="menuitem"
      data-active={local.active ? "" : undefined}
      {...rest}
    >
      {local.children}
    </a>
  );
}
