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

/**
 * Viewport container that can host active NavigationMenu content outside
 * the list DOM structure, enabling animated panel transitions.
 */
export function NavigationMenuViewport(props: NavigationMenuViewportProps): JSX.Element {
  const [local, rest] = splitProps(props, ["forceMount"]);
  const ctx = useNavigationMenuContext();
  const isOpen = () => ctx.value() !== "";

  return (
    <div
      data-scope="navigation-menu"
      data-part="viewport"
      data-state={isOpen() ? "open" : "closed"}
      data-orientation={ctx.orientation()}
      {...rest}
    />
  );
}
