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

export type TextFieldInputProps = JSX.InputHTMLAttributes<HTMLInputElement>;

/** The input element. Automatically wired to Label, Description, and ErrorMessage. */
export function TextFieldInput(props: TextFieldInputProps): JSX.Element {
  const [local, rest] = splitProps(props, [
    "id",
    "aria-describedby",
    "aria-invalid",
    "aria-required",
    "disabled",
  ]);
  const ctx = useTextFieldContext();
  return (
    <input
      id={local.id ?? ctx.inputId()}
      aria-describedby={local["aria-describedby"] ?? ctx.descriptionId()}
      aria-errormessage={ctx.invalid() ? ctx.errorMessageId() : undefined}
      aria-invalid={ctx.invalid() ? "true" : undefined}
      aria-required={ctx.required() ? "true" : undefined}
      disabled={local.disabled ?? ctx.disabled()}
      {...rest}
    />
  );
}
