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

export interface ComboboxItemProps extends JSX.HTMLAttributes<HTMLDivElement> {
  /** The value this item represents. */
  value: string;
  /** Whether this item is disabled. */
  disabled?: boolean | undefined;
  children?: JSX.Element | undefined;
}

/** A single selectable option within a Combobox dropdown. */
export function ComboboxItem(props: ComboboxItemProps): JSX.Element {
  const [local, rest] = splitProps(props, ["value", "disabled", "children"]);
  const ctx = useInternalComboboxContext();
  const itemProps = () => ctx.navigation.getItemProps(local.value);

  return (
    <div
      aria-disabled={local.disabled || undefined}
      data-disabled={local.disabled || undefined}
      {...itemProps()}
      {...rest}
    >
      {local.children}
    </div>
  );
}
