import React from 'react';

const CheckBox = ({ item, formData, handleChange, fieldName, itemLabelFunc = () => null, labelAttenuated = () => false, horizontal }) => {
  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
        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 ${isAttenuated ? 'text-gray-300' : 'font-bold text-emerald-600'}`}
        >
          {itemLabelFunc(item)}
        </label>
      )}
    </div>
  );
};

export default CheckBox;