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;