import type { JSX } from "solid-js";
import { Show, splitProps } from "solid-js";
import { useInternalComboboxContext } from "./combobox-context";

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

/** Shown when the Combobox items list is empty and the dropdown is open. */
export function ComboboxEmpty(props: ComboboxEmptyProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useInternalComboboxContext();

  return (
    <Show when={ctx.items().length === 0 && ctx.isOpen()}>
      <div role="status" {...rest}>
        {local.children}
      </div>
    </Show>
  );
}
