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

export interface TextFieldLabelProps extends JSX.HTMLAttributes<HTMLLabelElement> {
  children?: JSX.Element;
}

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