import styles from "./validationErrorPage.module.css"
import Background from "../../components/background/background.jsx";
import Button from "../../components/ui/button/button.jsx";
import { useContext } from "react";
import { AuthContext } from "../../contexts/auth/AuthContext.js";
import { Navigate, useNavigate } from "react-router";

export default function ValidationErrorPage() {

    const { logout, user } = useContext(AuthContext);
    const navigate = useNavigate();

    const handleLogout = async () => {
        await logout();
        navigate("/login");
    }

    if(user && user.validate === 1) return <Navigate to="/" />;

    return <Background>
        <div className={styles.content}>
            <h1 className={styles.title}> Votre compte n'a pas été validé </h1>
            <div className={`${styles.container} glassCard`}>
                <p> Votre compte n'a pas encore été validé, veuillez attendre la vérification de votre compte par un membre autorisé. </p>
                <p> Contact : contact@example.com </p>
                <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
            </div>
        </div>
    </Background>
}