import React    from 'react';
import ReactDOM from 'react-dom';

import style    from './Modal.module.scss';

/*
  Modal asks parent to unmount modal by setting modal prop value to false. This happens when the
  user clicks outside the modal.
*/

function Modal (props) {

  if(props.modal) {
    return ReactDOM.createPortal(
      <div className={style.Modal} role="complementary" onClick={(e) => {e.stopPropagation(); props.openModal(false); }} >
          <div className={style.content} onClick={(e) => e.stopPropagation()}>
            {props.children}
          </div>

      </div>, document.body
    );
  } else {
    return null;
  }



}
export default Modal;