import React from "react"
import {Link, NavLink, useLocation} from "react-router-dom"
import useAuthUser from "../hooks/AuthUser"
import Tracker from "./TimeTrackers/Tracker"
import {env} from "../utilities/env"

const Header = () => {

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

    return <header className="bg-blue-700 text-xl text-white">
        <div className="flex justify-between px-5  py-3">
            <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>
                    {env.VITE_REGISTER_DISABLED === 'false' && <Link to="/sinscrire">S&apos;inscrire</Link>}
            </span>}
        </div>
        <nav className="flex gap-5 bg-gray-600 px-5">
            <NavLink to="/">ToDos</NavLink>
            <NavLink to="/times">Times</NavLink>
        </nav>
    </header>
}

export default Header