import type { JSX } from "solid-js";
import { createUniqueId, splitProps } from "solid-js";
import { NavigationMenuItemContext, useNavigationMenuContext } from "./navigation-menu-context";
import type { NavigationMenuItemProps } from "./navigation-menu.props";

/**
 * A single item within the NavigationMenu list. Provides per-item context
 * (value and active state) to Trigger and Content children.
 */
export function NavigationMenuItem(props: NavigationMenuItemProps): JSX.Element {
  const [local, rest] = splitProps(props, ["value", "children"]);
  const ctx = useNavigationMenuContext();

  const itemValue = local.value ?? createUniqueId();
  const isActive = () => ctx.value() === itemValue;

  const itemCtx = { value: itemValue, isActive };

  return (
    <NavigationMenuItemContext.Provider value={itemCtx}>
      <li
        data-scope="navigation-menu"
        data-part="item"
        data-active={isActive() ? "" : undefined}
        {...rest}
      >
        {local.children}
      </li>
    </NavigationMenuItemContext.Provider>
  );
}
