// packages/core/src/components/command-palette/command-palette-group.tsx
import type { JSX } from "solid-js";
import { Show, splitProps } from "solid-js";
import type { CommandPaletteGroupProps } from "./command-palette.props";

/**
 * Groups related CommandPalette items with an optional visible heading.
 * Uses role="group" and aria-label for accessibility.
 */
export function CommandPaletteGroup(props: CommandPaletteGroupProps): JSX.Element {
  const [local, rest] = splitProps(props, ["heading", "children"]);

  return (
    <div role="group" aria-label={local.heading} {...rest}>
      <Show when={local.heading}>
        <div data-part="group-heading">{local.heading}</div>
      </Show>
      {local.children}
    </div>
  );
}
