import React from 'react';
import './CheckBox.css';
import PropTypes from 'prop-types';

const CheckBox = (props) => {
  return (
    <div className={'CheckBoxOwner'}>
      <label className="CheckBoxLabel">
        {props.label}
        <input
          checked={JSON.parse(props.checked)}
          autoFocus={props.autoFocus}
          disabled={props.disabled}
          onChange={props.changed}
          type="checkbox"
        />
        <span className="CheckBoxCheckMark" />
      </label>
    </div>
  );
};

CheckBox.propTypes = {
  autoFocus: PropTypes.bool,
  checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
  disabled: PropTypes.bool,
  label: PropTypes.string,
  changed: PropTypes.func,
};

export default CheckBox;