// packages/core/src/components/number-field/number-field-label.tsx
import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { useNumberFieldContext } from "./number-field-context";

export interface NumberFieldLabelProps extends JSX.HTMLAttributes<HTMLLabelElement> {
  /** Label content. */
  children?: JSX.Element | undefined;
}

/** Label element linked to the NumberField input via htmlFor. */
export function NumberFieldLabel(props: NumberFieldLabelProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useNumberFieldContext();
  return (
    <label
      for={ctx.inputId()}
      data-disabled={ctx.disabled() || undefined}
      {...rest}
    >
      {local.children}
    </label>
  );
}
