import type { BaseFieldControlProps } from "../types"
import { Input } from "@/shared/components/ui/input"

export type TextInputFieldProps = BaseFieldControlProps<string> & {
  placeholder?: string
  type?: React.HTMLInputTypeAttribute
  step?: React.InputHTMLAttributes<HTMLInputElement>["step"]
  formatter?: (value: string) => string
}

export function TextInputField({
  value,
  onChange,
  onBlur,
  name,
  disabled,
  invalid,
  placeholder,
  type = "text",
  step,
  formatter,
}: TextInputFieldProps) {
  return (
    <Input
      value={value}
      onChange={(e) => onChange(formatter ? formatter(e.target.value) : e.target.value)}
      onBlur={onBlur}
      name={name}
      disabled={disabled}
      aria-invalid={invalid || undefined}
      placeholder={placeholder}
      type={type}
      step={step}
    />
  )
}