import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useListboxContext } from "./listbox-context";

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

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

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