import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useInternalSelectContext } from "./select-context";

export interface SelectValueProps extends JSX.HTMLAttributes<HTMLSpanElement> {
  /** Text to display when no value is selected. */
  placeholder?: string;
}

/** Displays the selected value or a placeholder. */
export function SelectValue(props: SelectValueProps): JSX.Element {
  const [local, rest] = splitProps(props, ["placeholder"]);
  const ctx = useInternalSelectContext();

  return (
    <span data-placeholder={!ctx.selectedValue() ? "" : undefined} {...rest}>
      {ctx.selectedValue() ?? local.placeholder ?? ""}
    </span>
  );
}
