import { useId, type ComponentProps } from "react";
export interface TextInputProps extends Omit<
  ComponentProps<"input">,
  "onChange"
> {
  label: string;
  onChange?: (value: string) => void;
  error?: string;
  description?: string;
}
export function TextInput({
  label,
  id,
  onChange,
  error,
  description,
  className = "",
  "aria-describedby": describedBy,
  ...props
}: TextInputProps) {
  const generatedId = useId();
  const inputId = id ?? generatedId;
  const hint = error ?? description;
  const hintId = `${inputId}-hint`;
  return (
    <div className="ynr-field">
      <label htmlFor={inputId}>{label}</label>
      <input
        {...props}
        id={inputId}
        className={`ynr-input ${className}`}
        onChange={(event) => onChange?.(event.target.value)}
        aria-invalid={error ? true : props["aria-invalid"]}
        aria-describedby={
          [describedBy, hint ? hintId : undefined].filter(Boolean).join(" ") ||
          undefined
        }
      />
      {hint && (
        <p id={hintId} className={error ? "ynr-error" : "ynr-hint"}>
          {hint}
        </p>
      )}
    </div>
  );
}