import { useAuth } from "../../hooks";
import "./NavBar.scss";
import { logout } from "../../api";
import { Link } from "react-router-dom/";

export default function NavBar() {
    const { user } = useAuth();
    console.log(user);

    const onLogout = () => {
        logout().then((res) => {
            if (res === "Ok") {
                window.location.reload();
            }
        });
    };

    return (
        <nav id="nav-container">
            <ul id="leafs-container">
                <li className="leaf">
                    <Link to="/">Accueil</Link>
                </li>

                <li className="leaf">
                    <Link to="rooms">Pieces</Link>
                </li>

                {user ? (
                    <div className="leaf-into">
                        <li className="leaf">
                            <Link to="profile">Profile</Link>
                        </li>

                        <button className="leaf-btn" onClick={onLogout}>
                            Deconnexion
                        </button>
                    </div>
                ) : (
                    <li className="leaf-into">
                        <span className="leaf-txt">
                            <Link to="login">Connexion</Link>&nbsp;/&nbsp;
                            <Link to="register">Inscription</Link>
                        </span>
                    </li>
                )}
            </ul>
        </nav>
    );
}