import React from "react"
import {Link, useLocation} from "react-router-dom"
import useAuthUser from "../hooks/AuthUser";
import Tracker from "./Tracker";

const Header = () => {

    const {authUser} = useAuthUser()
    const location = useLocation()

    console.log(authUser)

    return <header className="flex justify-between py-3 px-5 bg-blue-700 text-white text-xl">
        <div>
            <Link to="/">Ticcat</Link>
        </div>

        {authUser && <Tracker />}
        {authUser
            ? <span className="flex gap-2">
                <Link to="/profile" className={location.pathname === '/profile' ? 'font-bold' : ''}>{authUser.name}</Link>
            </span>
            : <span className="flex gap-2">
                <Link to="/connexion">Connexion</Link>
                {/*<Link to="/sinscrire">S'inscrire</Link>*/}
            </span>}
    </header>
}

export default Header