import { useRef } from 'react';
import { CSSTransition } from 'react-transition-group';
import styles from './ErrorModal.module.css';


const ErrorModal = ({ open, onClose }) => {
  const transitionRef = useRef(null);

  return (
    <CSSTransition nodeRef={transitionRef} in={open} mountOnEnter unmountOnExit timeout={200} classNames="fade">
      <div className={styles.background} ref={transitionRef}>
        <div className={styles.content}>
          <p className={styles.text}>
            Sorry! The server took too long to generate points for that game - your configurations may be too restrictive.
          </p>
          <button onClick={onClose}>Close</button>
        </div>
      </div>
    </CSSTransition>
  )
};

export default ErrorModal;