import React from 'react'

const SelectCategoriesItem = ({category, checked, onChange}) => {
  const elementId = 'dreamfox-'+category.value;
  return (
    <div className="dreamfox-select-categories-item">
      <input
        className="dreamfox-select-categories-item__input"
        type="checkbox"
        id={elementId}
        onChange={e => onChange(category.value, e.target.checked)}
        checked={checked}
      />
      <label className="dreamfox-select-categories-item__label" htmlFor={elementId}>{category.label}</label>
    </div>
  )
}

export default SelectCategoriesItem
