import { useContext, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { ApiContext } from "../../contexts/api";
import { useApi } from "../../hooks/useApi";
import { getAuth, onAuthStateChanged } from "firebase/auth";



export const LandingPage = () => {
    const navigate = useNavigate();
    const api = useApi();
    const [isUserSignedIn, setIsUserSignedIn] = useState(false);

    const auth = getAuth();
    onAuthStateChanged(auth, (user) => {
        if (user) {
            setIsUserSignedIn(true);
        } else {
            setIsUserSignedIn(false);
        }
    });

    useEffect(() => {
        if (isUserSignedIn) {
            navigate('../home/', { replace: true });
        }
    }, [isUserSignedIn]);

    return (
        <div>
            <div>
                <h1>Your Jams!</h1>
            </div>
            <div>
                <h3>Welcome to the best place to share the music you're feeling!</h3>
                <p>If you're ready to share your vibes with friends, you've come to the right place!</p>
                <button onClick={() => navigate('login/', { replace: true })}>Login</button>
                <button onClick={() => navigate('signup/', { replace: true })}>Sign up</button>
            </div>
        </div>
    )
}