import { useState, useEffect } from 'react';
import { Modal } from './Modal';

const someHeavyCalculation = () => {
  const random = Math.floor(Math.random() * 3);
  if (random === 1) return Promise.resolve(true);
  return Promise.resolve(false);
};

export const Modal1 = ({ jumpToNextModal }) => {
  const [isVisible, setIsVisible] = useState(true);

  useEffect(() => {
    someHeavyCalculation().then((result) => {
      if (result) {
        setIsVisible(result);
      } else {
        jumpToNextModal();
      }
    });
  }, [jumpToNextModal]);

  return (
    <Modal
      title="Modal 1"
      jumpToNextModal={jumpToNextModal}
      isVisible={isVisible}
    />
  );
};