// material-ui
import {
    Grid,
    Typography,
    Button
} from '@mui/material';
import * as React from "react";
import { useNavigate } from "react-router-dom";
import { FormattedMessage } from "react-intl";
import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));


// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {

    const navigate = useNavigate()
    const [onReady, setOnReady] = React.useState(false);

    React.useEffect(() => {
        setOnReady(true);
    }, []);

    return (
        !onReady ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :

            <Grid container sx={{ height: '100%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                <Grid item xs={12} md={12} >
                    <Grid container justifyContent="flex-start" alignItems="center" >
                        <center>
                            <Grid item xs={12} md={12} >
                                <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                    <FormattedMessage id="loginErrorMessage3" />
                                </Typography>
                            </Grid>
                            <Grid item xs={12} md={12} >
                                <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                    <FormattedMessage id="sentSecurityCode2" />
                                </Typography>
                            </Grid>
                            <Grid item xs={12} md={12} >
                                <Button
                                    component="span"
                                    variant="contained"
                                    size="large"
                                    sx={{ m: 4 }}
                                    onClick={() => {
                                        navigate("/login");
                                    }}
                                ><FormattedMessage id="backToLogin" /></Button>
                            </Grid>

                        </center>
                    </Grid>
                </Grid>
                {/*row 2*/}
            </Grid >

    );
};

export default Index;