import type { JSX } from "solid-js";
import { Show, splitProps } from "solid-js";
import { useNavigationMenuItemContext } from "./navigation-menu-context";
import type { NavigationMenuContentProps } from "./navigation-menu.props";

/**
 * Dropdown content panel for a NavigationMenu item. Renders only when the
 * parent item is active, unless forceMount is true.
 */
export function NavigationMenuContent(props: NavigationMenuContentProps): JSX.Element {
  const [local, rest] = splitProps(props, ["forceMount", "children"]);
  const itemCtx = useNavigationMenuItemContext();

  return (
    <Show when={local.forceMount || itemCtx.isActive()}>
      <div
        data-scope="navigation-menu"
        data-part="content"
        data-active={itemCtx.isActive() ? "" : undefined}
        {...rest}
      >
        {local.children}
      </div>
    </Show>
  );
}
