import {Fragment} from 'react';
import PropTypes from 'prop-types';

function Modal(props) {
  if (!props.showModal) return null;

  return (
    <Fragment>
      <div
        className={
          'justify-center items-center flex overflow-x-hidden overflow-y-auto fixed \
            inset-0 z-50 outline-none focus:outline-none'
        }
      >
        <div className='relative w-auto my-6 mx-auto w-4/5 max-w-6xl'>
          <div
            className={
              'border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white \
                outline-none focus:outline-none'
            }
          >
            <button
              className={
                'absolute top-0 left-0 z-10 p-1 mr-auto bg-transparent border-0 text-black opacity-50 float-left \
                  text-3xl leading-none font-semibold outline-none focus:outline-none'
              }
              type='button'
              onClick={props.onClose}
            >
              <span
                className={
                  'bg-transparent text-black opacity-50 h-6 w-6 text-2xl block outline-none focus:outline-none'
                }
              >
                ×
              </span>
            </button>
            {props.header && (
              <div className='flex items-start justify-between p-5 border-b border-solid border-blueGray-200 rounded-t'>
                <p className='text-2xl font-medium'>{props.header}</p>
              </div>
            )}
            <div className='relative p-6 flex-auto'>
              <p className='my-4 text-blueGray-500 text-lg leading-relaxed'>
                {props.body}
              </p>
            </div>
            <div className='flex items-center justify-end p-4 border-t border-solid border-blueGray-200 rounded-b'>
              {props.footer}
            </div>
          </div>
        </div>
      </div>
      <div className='opacity-75 fixed inset-0 z-40 bg-black'/>
    </Fragment>
  );
}

Modal.propTypes = {
  showModal: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  header: PropTypes.node,
  body: PropTypes.node.isRequired,
  footer: PropTypes.node.isRequired
};

export default Modal;