const Modal = ({ isVisible = false, title, children, footer, onClose }) => {
  
  React.useEffect(() => {
    document.addEventListener('keydown', keydownHandler);
    return () => document.removeEventListener('keydown', keydownHandler);
  });

  function keydownHandler({ key }) {
    switch (key) {
      case 'Escape':
        onClose();
        break;
      default:
    }
  }

  return !isVisible ? null : (
    <div className="modal" onClick={onClose}>

      <div className="modal-dialog" onClick={e => e.stopPropagation()}>
        
        <div className="modal-header">
          <div className="modal-title">{title}</div>
          <span className="modal-close" onClick={onClose}>&times;</span>
        </div>
        <div className="modal-body">
          <div className="modal-content">{children}</div>
        </div>
        {footer && <div className="modal-footer">{footer}</div>}
      </div>
    </div>
  );
}

//Add the component to the render function
function App() {
  const [isModal, setModal] = React.useState(false);

  return (
    <>
      <button onClick={() => setModal(true)}>Click Here</button>
      <Modal
        isVisible={isModal}
        title="Modal Title"
        footer={<button className="btn" onClick={() => setModal(false)}>Close</button>}
        onClose={() => setModal(false)}
        >
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit lorem at sapien commodo, vel varius sem lacinia. Praesent accumsan vestibulum massa, vitae faucibus justo ultrices posuere. Aenean et euismod erat. Vestibulum id pretium metus. Morbi magna libero, aliquet sit amet ante eu, dictum auctor mi. Sed quis venenatis nunc. Sed ac hendrerit nisi. Vestibulum dictum nisi dignissim, pulvinar velit sit amet, ultrices metus. Ut fermentum sed dolor quis malesuada. Fusce mollis venenatis cursus. Sed scelerisque enim fermentum ligula mattis porta. Etiam in dui mattis, mattis massa non, euismod quam. Donec condimentum ipsum neque, id sodales neque mollis eget. Proin suscipit ante leo, hendrerit pellentesque felis ornare non. Nam pretium pretium purus, in pretium dolor elementum sit amet. Proin viverra vel mauris suscipit venenatis.</p>
      </Modal>
    </>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));