content: import React from 'react';
  import PropTypes from 'prop-types';
  import Modal from 'react-modal';
  import classNames from 'classnames';
  
  import './OHIFModal.styl';
  
  const customStyle = {
    overlay: {
      zIndex: 1071,
      backgroundColor: 'rgb(0, 0, 0, 0.5)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
  };
  
  Modal.setAppElement(document.getElementById('root'));
  
  const OHIFModal = ({
    className,
    closeButton,
    shouldCloseOnEsc,
    isOpen,
    fullscreen,
    title,
    onClose,
    children,
  }) => {
    const renderHeader = () => {
      return (
        title && (
          <div className="OHIFModal__header" data-cy="modal-header">
            <h4>{title}</h4>
            {closeButton && (
              <button data-cy="close-button" onClick={onClose}>
                ×
              </button>
            )}
          </div>
        )
      );
    };
  
    const classes = fullscreen
      ? classNames('OHIFModal', className, 'OHIFModal-fullscreen')
      : classNames('OHIFModal', className);
  
    return (
      <Modal
        className={classes}
        data-cy="modal"
        shouldCloseOnEsc={shouldCloseOnEsc}
        isOpen={isOpen}
        title={title}
        style={customStyle}
      >
        <>
          {renderHeader()}
          <div className="OHIFModal__content" data-cy="modal-content">
            {children}
          </div>
        </>
      </Modal>
    );
  };
  
  OHIFModal.propTypes = {
    className: PropTypes.string,
    closeButton: PropTypes.bool,
    shouldCloseOnEsc: PropTypes.bool,
    isOpen: PropTypes.bool,
    title: PropTypes.string,
    onClose: PropTypes.func,
    children: PropTypes.oneOfType([
      PropTypes.arrayOf(PropTypes.node),
      PropTypes.node,
    ]).isRequired,
  };
  
  export default OHIFModal;
  