import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styles from './styles.module.css';
import { Phase1 } from './Phase1';
import { Phase2 } from './Phase2';
import { Phase4 } from './Phase4';
const OverlayingTutorial = ({ onTutorialFinished, tutorialPhase, setTutorialPhase }) => {
    const onFinished = () => {
        if (onTutorialFinished) {
            onTutorialFinished();
        }
    };
    if (!tutorialPhase) {
        return null;
    }
    const onOverlayClick = (e) => {
        e.stopPropagation();
    };
    return (_jsx("div", { className: styles.overlay, onClick: onOverlayClick, children: _jsxs("div", { className: styles.tutorialBody, children: [(tutorialPhase === 1) ? _jsx(Phase1, { nextPhase: () => setTutorialPhase(2) }) : null, (tutorialPhase === 2) ? _jsx(Phase2, { nextPhase: () => setTutorialPhase(3) }) : null, (tutorialPhase === 3) ? _jsx(Phase4, { nextPhase: onFinished }) : null] }) }));
};
export default OverlayingTutorial;
