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

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

export function TextAreaField({
  name,
  label,
  value,
  required,
  onChange,
  error,
}: TextAreaFieldProps) {
  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>
      <textarea
        id={name}
        name={name}
        value={value}
        rows={4}
        required={required}
        aria-required={required}
        aria-describedby={error ? `${name}-error` : undefined}
        aria-invalid={!!error}
        onChange={(e) => onChange(e.target.value)}
        className="text-area"
        placeholder="Escribí tu respuesta acá (opcional)…"
      />
      {error && (
        <p role="alert" className="field-error" id={`${name}-error`}>
          {error}
        </p>
      )}
    </div>
  )
}