'use client'
import * as React from 'react';
import { Box, Typography } from '@mui/material';
import { Done, ErrorOutline } from '@mui/icons-material';

export default function EmailValidate() {

    const [validated, setValidated] = React.useState(false);
    const [email, setEmail] = React.useState('');

    React.useEffect(() => {
        const validateEmail = async () => {
            const token = window.location.href.split('?token=')[1];
            const response = await fetch(`/api/mail/validate?token=${token}`);
            if (response.ok) {
                const data = await response.json();
                setValidated(true);
                setEmail(data.email);
            } else {
                setValidated(false);
            }
        }
        validateEmail();
    }, []);

    return (
        <>
            <Box sx={{ flexGrow: 1, textAlign: 'center', margin: '25px' }}>
                {validated ? <>
                    <Typography variant="h3" component="div" sx={{ flexGrow: 1 }}>Validation de l&apos;email</Typography>
                    <Done sx={{ fontSize: 100, color: 'green', margin: '25px' }} />
                    <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>Votre email a été validé</Typography>
                    <Typography variant="body1" component="div" sx={{ flexGrow: 1 }}>Votre email {email} a été validé avec succès</Typography>
                </> : <>
                    <Typography variant="h3" component="div" sx={{ flexGrow: 1 }}>Validation de l&apos;email</Typography>
                    <ErrorOutline sx={{ fontSize: 100, color: 'red', margin: '25px' }} />
                    <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>Erreur lors de la validation de l&apos;email</Typography>
                    <Typography variant="body1" component="div" sx={{ flexGrow: 1 }}>Une erreur est survenue lors de la validation de votre email. Il peut s&apos;agir de votre jeton qui est expiré ou inexistant.</Typography>
                </>}
            </Box>
        </>
    );
}