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

const Header = () => {

    const {authUser} = useAuthUser()
    const location = useLocation()
    const {targetRef, dimensions} = useDimension()

    return <header ref={targetRef}
                   className="flex justify-between bg-blue-700 px-5 py-3 text-xl text-white">
        <div>
            <Link to="/" className={`font-bold`}>
                {dimensions.width < 400 ? 'B' : 'Bermite'}
            </Link>
        </div>

        {authUser?.locations && authUser.locations.length > 0 && <nav className="flex gap-2">
            <Link to="/pluviometrie" className={location.pathname === '/pluviometrie' ? 'font-bold' : ''}>Pluviométrie</Link>
            <Link to="/meteo" className={location.pathname === '/meteo' ? 'font-bold' : ''}>Météo</Link>
        </nav>}

        {authUser
            ? <span className="flex gap-2">
                <Link to="/profile" className={`${location.pathname === '/profile' ? 'font-bold' : ''} font-bold`}>
                    {dimensions.width < 400 ? authUser.name[0] : 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