import type { JSX } from "solid-js";
import { createUniqueId, splitProps } from "solid-js";

export interface ListboxGroupLabelProps extends JSX.HTMLAttributes<HTMLDivElement> {
  children?: JSX.Element;
}

/** Label for a Listbox group. Linked via aria-labelledby. */
export function ListboxGroupLabel(props: ListboxGroupLabelProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const id = createUniqueId();
  return (
    <div id={id} role="presentation" {...rest}>
      {local.children}
    </div>
  );
}
