import PropTypes from 'prop-types'

const Selector = (props) => {
  return (
    <>
      <div className='grid grid-cols-2 sm:gap-[1px]'>
        <span className='col-span-2 mx-auto text-l font- text-center font-poppins'>{props.name}</span>
        {props.value_to_map_from.map((value_to_map_from) => (
          <label key={value_to_map_from.id} className='flex items-center justify-start text-sm font-poppins font-semibold text-gray-600'>
            <input 
              type='checkbox'
              name={props.inputname}
              value={value_to_map_from.id}
              onChange={props.onChange}
              className='mr-2'
              checked={Array.isArray(props.state[props.inputname]) && props.state[props.inputname].includes(value_to_map_from.id)}
            />
            {value_to_map_from.name}
          </label>
        ))}
      </div>
    </>
  )
}

Selector.propTypes = {
  value_to_map_from: PropTypes.array,
  setSearchQuery: PropTypes.func,
  name: PropTypes.string,
  inputname: PropTypes.string,
  onChange: PropTypes.func,
  state: PropTypes.object
}

export default Selector