Terminado sprint 2A

components/widgets/rating-scale.tsx

@@ -0,0 +1,71 @@
+'use client'
+import type { RatingOptions } from '@/lib/types'
+
+interface RatingScaleProps {
+  name: string
+  legend: string
+  ratingOptions: RatingOptions
+  value: number | undefined
+  required: boolean
+  onChange: (value: number) => void
+  error?: string
+}
+
+export function RatingScale({
+  name,
+  legend,
+  ratingOptions,
+  value,
+  required,
+  onChange,
+  error,
+}: RatingScaleProps) {
+  const { min, max, min_label, max_label } = ratingOptions
+  const steps = Array.from({ length: max - min + 1 }, (_, i) => min + i)
+
+  return (
+    <fieldset className="question-fieldset">
+      <legend className="question-legend">
+        {legend}
+        {required && <span className="required-mark" aria-hidden="true"> *</span>}
+        {required && <span className="sr-only"> (obligatorio)</span>}
+      </legend>
+      <div className="rating-wrapper" role="group" aria-label={`Escala ${min} a ${max}`}>
+        <span className="rating-label rating-label-min" aria-hidden="true">
+          {min_label}
+        </span>
+        <div className="rating-steps">
+          {steps.map((step) => {
+            const id = `${name}_${step}`
+            return (
+              <label key={step} className="rating-step" htmlFor={id}>
+                <input
+                  type="radio"
+                  id={id}
+                  name={name}
+                  value={step}
+                  checked={value === step}
+                  onChange={() => onChange(step)}
+                  aria-required={required}
+                  aria-label={`${step} — ${step === min ? min_label : step === max ? max_label : ''}`}
+                  className="rating-input sr-only"
+                />
+                <span className="rating-dot" aria-hidden="true">
+                  {step}
+                </span>
+              </label>
+            )
+          })}
+        </div>
+        <span className="rating-label rating-label-max" aria-hidden="true">
+          {max_label}
+        </span>
+      </div>
+      {error && (
+        <p role="alert" className="field-error" id={`${name}-error`}>
+          {error}
+        </p>
+      )}
+    </fieldset>
+  )
+}