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 type="button" onClick={onClose}>
            Close
          </button>
        </div>
      </div>
    </CSSTransition>
  );
};

export default ErrorModal;
