// packages/core/src/components/command-palette/command-palette-list.tsx
import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useCommandPaletteContext } from "./command-palette-context";
import type { CommandPaletteListProps } from "./command-palette.props";

/**
 * Container for CommandPalette items. Spreads list navigation container props
 * so keyboard events are handled correctly.
 */
export function CommandPaletteList(props: CommandPaletteListProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useCommandPaletteContext();
  const { role, "aria-orientation": ariaOrientation, onPointerLeave } = ctx.navigation.containerProps;

  return (
    <div
      role={role}
      aria-orientation={ariaOrientation}
      onPointerLeave={onPointerLeave}
      {...rest}
    >
      {local.children}
    </div>
  );
}
