n3wt-school/Front-End/src/components/CheckBoxList.js

import React from 'react';

const CheckBoxList = ({
  items,
  formData,
  handleChange,
  fieldName,
  label,
  icon: Icon,
  className,
  itemLabelFunc = (item) => item.name,
  labelAttenuated = () => false,
  horizontal = false // Ajouter l'option horizontal
}) => {
  const handleCheckboxChange = (e) => {
    handleChange(e);
  };

  return (
    <div className={`mb-4 ${className}`}>
      <label className="block text-sm font-medium text-gray-700 flex items-center">
        {Icon && <Icon className="w-5 h-5 mr-2" />}
        {label}
      </label>
      <div className={`mt-2 grid ${horizontal ? 'grid-cols-6 gap-2' : 'grid-cols-1 gap-4'}`}>
        {items.map(item => {
          const isChecked = formData[fieldName].includes(parseInt(item.id));
          const isAttenuated = labelAttenuated(item) && !isChecked;
          return (
            <div key={item.id} className={`flex ${horizontal ? 'flex-col items-center' : 'flex-row items-center'}`}>
              {horizontal && (
                <label 
                  htmlFor={`${fieldName}-${item.id}`} 
                  className={`block text-sm text-center mb-1 ${
                    isAttenuated ? 'text-gray-300' : 'font-bold text-emerald-600'
                  }`}
                >
                  {itemLabelFunc(item)}
                </label>
              )}
              <input
                key={`${item.id}-${Math.random()}`}
                type="checkbox"
                id={`${fieldName}-${item.id}`}
                name={fieldName}
                value={item.id}
                checked={isChecked}
                onChange={handleCheckboxChange}
                className={`form-checkbox h-4 w-4 rounded-mg text-emerald-600 hover:ring-emerald-400 checked:bg-emerald-600 hover:border-emerald-500 hover:bg-emerald-500 cursor-pointer ${horizontal ? 'mt-1' : 'mr-2'}`}
                style={{ borderRadius: '6px', outline: 'none', boxShadow: 'none' }}
              />
              {!horizontal && (
                <label 
                  htmlFor={`${fieldName}-${item.id}`} 
                  className={`block text-sm ${
                    isAttenuated ? 'text-gray-300' : 'font-bold text-emerald-600'
                  }`}
                >
                  {itemLabelFunc(item)}
                </label>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default CheckBoxList;