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

/**
 * Ordered list container for NavigationMenu items. Renders as a <ul> with
 * role="menubar" and the correct orientation data attribute.
 */
export function NavigationMenuList(props: NavigationMenuListProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useNavigationMenuContext();

  return (
    <ul
      data-scope="navigation-menu"
      data-part="list"
      role="menubar"
      data-orientation={ctx.orientation()}
      {...rest}
    >
      {local.children}
    </ul>
  );
}
