import logger from '@/utils/logger';
import React from 'react';

const CheckBox = ({
  item,
  formData,
  handleChange,
  fieldName,
  itemLabelFunc = () => null,
  horizontal,
}) => {
  // Vérifier si formData[fieldName] est un tableau ou une valeur booléenne
  const isChecked = Array.isArray(formData[fieldName])
    ? formData[fieldName].includes(parseInt(item.id)) // Si c'est un tableau, vérifier si l'élément est inclus
    : formData[fieldName]; // Si c'est une valeur booléenne, l'utiliser directement

  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 font-medium text-gray-700"
        >
          {itemLabelFunc(item)}
        </label>
      )}
      <input
        type="checkbox"
        id={`${fieldName}-${item.id}`}
        name={fieldName}
        value={item.id}
        checked={isChecked}
        onChange={handleChange}
        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 text-center mb-1 font-medium text-gray-700"
        >
          {itemLabelFunc(item)}
        </label>
      )}
    </div>
  );
};

export default CheckBox;