import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { NovaCompositionCoorpacademyCheck as Check } from '@coorpacademy/nova-icons';
import { ColorPropType } from '../../util/proptypes';
import Checkbox from '../../atom/checkbox';
import style from './style.css';
const TitledCheckbox = props => {
  const {
    choice,
    background,
    onToggle
  } = props;
  const label = choice.name;
  const handleChange = useMemo(() => () => onToggle(choice), [onToggle, choice]);
  return /*#__PURE__*/React.createElement("label", {
    className: style.defaultStyle
  }, /*#__PURE__*/React.createElement("div", {
    className: style.box,
    style: {
      background: background || '#3d3d3d'
    }
  }, choice.selected ? /*#__PURE__*/React.createElement(Check, {
    className: style.icon
  }) : null, /*#__PURE__*/React.createElement(Checkbox, {
    className: style.input,
    checked: choice.selected,
    onChange: handleChange,
    "data-name": label
  })), /*#__PURE__*/React.createElement("span", {
    title: label,
    className: style.label
  }, label));
};
TitledCheckbox.propTypes = process.env.NODE_ENV !== "production" ? {
  choice: PropTypes.shape({
    selected: PropTypes.bool.isRequired,
    name: PropTypes.string.isRequired,
    value: PropTypes.string
  }).isRequired,
  background: ColorPropType,
  onToggle: PropTypes.func.isRequired
} : {};
export default TitledCheckbox;
//# sourceMappingURL=index.js.map