/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { ModalContext } from './modalContext';

import styles from './modal.module.scss';

const Modal = ({ content, children }) => {
  const { showModal, setShowModal, modalContent, setModalContent } = useContext(ModalContext);

  const handleClick = () => {
    setShowModal(!showModal);
    setModalContent(!modalContent ? content : '');
  };

  return (
    <div className={styles.modalChildren || ''} onClick={() => handleClick()}>
      {children}
    </div>
  );
};

Modal.propTypes = {
  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]),
};

export default Modal;
