import ReactModal from 'react-modal';
import {FC, PropsWithChildren} from 'react';
import {CloseOutlined} from '@ant-design/icons';

const styles: ReactModal.Styles = {
  content: {
    width: '90vw',
    height: '90vh',
    position: 'relative',
    overflow: 'hidden',
  },
};

type Props = {
  visible: boolean;
  onClose: () => void;
  'data-testid'?: string;
};

const LDPageModal: FC<PropsWithChildren<Props>> = function(props) {
  const {
    children,
    visible,
    onClose,
  } = props;

  return (
    <ReactModal
      shouldCloseOnOverlayClick
      onRequestClose={onClose}
      isOpen={visible}
      ariaHideApp={false}
      style={styles}
      closeTimeoutMS={200}
    >
      <section className="ld-page-dialog" data-testid={props['data-testid']}>
        <div className="ld-page-dialog-close">
          <CloseOutlined
            className="ld-page-dialog-close-icon"
            onClick={onClose}
          />
        </div>
        <div className="ld-page-dialog-content">{children}</div>
      </section>
    </ReactModal>
  );
};

export default LDPageModal;