'use client'
import type { ReactNode } from 'react'

interface TextShortFieldProps {
  name: string
  label: ReactNode
  value: string
  required: boolean
  placeholder?: string
  onChange: (value: string) => void
  error?: string
}

export function TextShortField({
  name,
  label,
  value,
  required,
  placeholder = '',
  onChange,
  error,
}: TextShortFieldProps) {
  return (
    <div className="question-fieldset">
      <label className="question-legend" htmlFor={name}>
        {label}
        {required && <span className="required-mark" aria-hidden="true"> *</span>}
        {required && <span className="sr-only"> (obligatorio)</span>}
      </label>
      <input
        type="text"
        id={name}
        name={name}
        value={value}
        required={required}
        aria-required={required}
        aria-describedby={error ? `${name}-error` : undefined}
        aria-invalid={!!error}
        placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)}
        className="text-short-input"
        autoComplete="off"
      />
      {error && (
        <p role="alert" className="field-error" id={`${name}-error`}>
          {error}
        </p>
      )}
    </div>
  )
}