/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from 'react';
import PropTypes from 'prop-types';
import styles from './toggle-button.module.scss';

const ToggleButton = ({ icon1, icons2, state, setStateFunc }) => (
  <div className={styles?.wrgtoggle || ''} onClick={() => setStateFunc(!state)}>
    <div
      className={`${styles?.wrgtogglecontainer || ''} ${
        state ? styles?.wrgtogglecontainerOn || '' : ''
      }`}
    >
      <div className={styles?.wrgtogglecheck || ''}>
        <span>{icon1}</span>
      </div>
      <div className={styles?.wrgtoggleuncheck || ''}>
        <span>{icons2}</span>
      </div>
    </div>

    <div
      className={`${styles?.wrgtogglecircle || ''} ${
        state ? styles?.wrgtogglecircleAgreed || '' : ''
      }`}
    />
  </div>
);

ToggleButton.propTypes = {
  icon1: PropTypes.elementType,
  icons2: PropTypes.elementType,
  state: PropTypes.bool,
  setStateFunc: PropTypes.func,
};

export default ToggleButton;
