import styles from "./WaitValidationPage.module.css"
import Background from "../../components/Background/Background.jsx";
import Button from "../../components/ui/Button/Button";
import { useContext } from "react";
import { AuthContext } from "../../contexts/Auth/AuthContext.js";
import { Navigate, useNavigate, Link } from "react-router";

export default function WaitValidationPage() {

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

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

    const handleRefresh = () => {
        window.location.reload();
    }

    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 :
                    <Link to={"https://comite.beaupont.fr/contactez-nous"} className={styles.link}>
                        https://comite.beaupont.fr/contactez-nous
                    </Link>
                </p>
                <div className={styles.btnContainer}>
                    <Button variant={"default"} onClick={handleRefresh}> Recharger </Button>
                    <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
                </div>
            </div>
        </div>
    </Background>
}