import React, { useState, useEffect } from 'react';
import Grid from '@material-ui/core/Grid';

interface IProps {
    onFinish: () => void;
}

export function Countdown(props: IProps): React.ReactElement {
    const [x, setX] = useState(3);
    useEffect(() => {
        if(x === 0) {
            props.onFinish();
            return;
        }
        setTimeout(()=>setX(x-1), 200);
    });

    return (<>
        <Grid container spacing={3}>
            <Grid item xs={12}>
                <h1>Get Ready!</h1>
                <h1>{x}</h1>
            </Grid>
        </Grid>
    </>)
}