import ReactModal from 'react-modal';
import {ReactModalStyle} from '.';
import {ChildrenFC} from '@utils';

const styles: ReactModalStyle = {
  content: {
    width: '80vw',
    height: '90vh',
  },
};

type Props = {
  visible: boolean,
  onClose: () => void,
  testId?: string,
};

const PageModal: ChildrenFC<Props> = function({children, visible, onClose, testId}) {
  return (
    <ReactModal
      data-testid={testId}
      shouldCloseOnOverlayClick
      onRequestClose={onClose}
      isOpen={visible}
      ariaHideApp={false}
      style={styles}
      closeTimeoutMS={200}
    >
      {children}
    </ReactModal>
  );
};

export default PageModal;
