Actua;izacion de componentes

src/components/checkbox-option-group.tsx

@@ -1,58 +1,46 @@
 import React from "react";
 
-export interface CheckboxOption<T = unknown> {
+export interface RadioOption<T = unknown> {
   label: string;
   value: T;
   disabled?: boolean;
 }
 
-interface CheckboxOptionGroupProps<T = unknown> {
+interface RadioOptionGroupProps<T = unknown> {
   name: string;
-  options: CheckboxOption<T>[];
-  selectedValues: T[];
-  onChange: (value: T, checked: boolean) => void;
-  maxSelected?: number;
+  options: RadioOption<T>[];
+  selectedValue?: T;
+  onChange: (option: RadioOption<T>) => void;
   disabled?: boolean;
   className?: string;
 }
 
-export default function CheckboxOptionGroup<T = unknown>({
+export default function RadioOptionGroup<T>({
   name,
   options,
-  selectedValues,
+  selectedValue,
   onChange,
-  maxSelected,
   disabled = false,
   className = "",
-}: CheckboxOptionGroupProps<T>) {
-  const isSelected = (value: T) => selectedValues.includes(value);
-
+}: RadioOptionGroupProps<T>) {
   return (
     <div className={`d-flex flex-column gap-2 mb-3 ${className}`}>
-      {options.map((option, index) => {
-        const checked = isSelected(option.value);
-        const limitReached =
-          maxSelected !== undefined &&
-          selectedValues.length >= maxSelected &&
-          !checked;
-
-        return (
-          <label
-            key={index}
-            className="option list-group-item-action d-flex align-items-center"
-          >
-            <input
-              type="checkbox"
-              name={name}
-              className="form-check-input me-2"
-              disabled={disabled || option.disabled || limitReached}
-              checked={checked}
-              onChange={(e) => onChange(option.value, e.target.checked)}
-            />
-            {option.label}
-          </label>
-        );
-      })}
+      {options.map((option, index) => (
+        <label
+          key={index}
+          className="option list-group-item-action d-flex align-items-center"
+        >
+          <input
+            type="radio"
+            name={name}
+            className="form-check-input me-2"
+            disabled={disabled || option.disabled}
+            checked={option.value === selectedValue}
+            onChange={() => onChange(option)}
+          />
+          {option.label}
+        </label>
+      ))}
     </div>
   );
 }