Terminado sprint 2A

components/widgets/text-area-field.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+interface TextAreaFieldProps {
+  name: string
+  label: string
+  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>
+  )
+}