import styles from "./LoginPage.module.css";
import LoginForm from "./components/LoginForm/LoginForm";
import Background from "../../components/Background/Background.jsx";
import { useEffect, useContext } from "react";
import { AuthContext, AuthContextType } from "../../../src/contexts/Auth/AuthContext";
import { useNavigate } from "react-router";

function LoginPage() {
  const { user, loading } = useContext(AuthContext) as AuthContextType;
  const navigate = useNavigate();

  useEffect(() => {
    if (!loading && user) {
      navigate("/");
    }
  }, [loading, user, navigate]);

  return (
    <Background className="">
      <div className={styles.container}>
        <h1 className={styles.title}>Connexion</h1>
        <LoginForm />
      </div>
    </Background>
  );
}

export default LoginPage;