From cbd2659f984ec89d1c8e160f6104550756a19959 Mon Sep 17 00:00:00 2001
From: jorgemike <alvaradojr2001@gmail.com>
Date: Tue, 1 Apr 2025 10:13:32 -0600
Subject: [PATCH] fix components

---
 src/components/checkbox-option-group.tsx | 60 ++++++++++++++----------
 src/components/radio-option-group.tsx    |  4 +-
 2 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/components/checkbox-option-group.tsx b/src/components/checkbox-option-group.tsx
index c4464d0..ccaf435 100644
--- a/src/components/checkbox-option-group.tsx
+++ b/src/components/checkbox-option-group.tsx
@@ -1,46 +1,58 @@
 import React from "react";
 
-export interface RadioOption<T = unknown> {
+export interface CheckboxOption<T = unknown> {
   label: string;
   value: T;
   disabled?: boolean;
 }
 
-interface RadioOptionGroupProps<T = unknown> {
+interface CheckboxOptionGroupProps<T = unknown> {
   name: string;
-  options: RadioOption<T>[];
-  selectedValue?: T;
-  onChange: (option: RadioOption<T>) => void;
+  options: CheckboxOption<T>[];
+  selectedValues: T[];
+  onChange: (option: CheckboxOption<T>) => void;
+  maxSelected?: number;
   disabled?: boolean;
   className?: string;
 }
 
-export default function RadioOptionGroup<T>({
+export default function CheckboxOptionGroup<T = unknown>({
   name,
   options,
-  selectedValue,
+  selectedValues,
   onChange,
+  maxSelected,
   disabled = false,
   className = "",
-}: RadioOptionGroupProps<T>) {
+}: CheckboxOptionGroupProps<T>) {
+  const isSelected = (value: T) => selectedValues.includes(value);
+
   return (
     <div className={`d-flex flex-column gap-2 mb-3 ${className}`}>
-      {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>
-      ))}
+      {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={() => onChange(option)}
+            />
+            {option.label}
+          </label>
+        );
+      })}
     </div>
   );
 }
diff --git a/src/components/radio-option-group.tsx b/src/components/radio-option-group.tsx
index cc2bc2c..c4464d0 100644
--- a/src/components/radio-option-group.tsx
+++ b/src/components/radio-option-group.tsx
@@ -10,7 +10,7 @@ interface RadioOptionGroupProps<T = unknown> {
   name: string;
   options: RadioOption<T>[];
   selectedValue?: T;
-  onChange: (value: T) => void;
+  onChange: (option: RadioOption<T>) => void;
   disabled?: boolean;
   className?: string;
 }
@@ -36,7 +36,7 @@ export default function RadioOptionGroup<T>({
             className="form-check-input me-2"
             disabled={disabled || option.disabled}
             checked={option.value === selectedValue}
-            onChange={() => onChange(option.value)}
+            onChange={() => onChange(option)}
           />
           {option.label}
         </label>