import {useAuth} from "../../context/AuthContext.tsx";
import {Link, useNavigate} from "react-router-dom";
import mainLogo from "../../assets/logo.png";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faSignOut} from "@fortawesome/free-solid-svg-icons";

const HeaderMenu = () => {
    const auth = useAuth()
    const navigate = useNavigate();
    const menuItems = [
        { path: '/', title: 'Home'}
    ]
    function logout() {
        auth.logout()
        navigate('/');
    }
    return <>
        <div className={"flex p-1 justify-between bg-gray-200 dark:bg-sky-900"}>
            <div className={"flex items-center"}>
                <div className={"w-8 h-8 lg:w-16 lg:h-16"}>
                    <img className={""} src={mainLogo} alt={"logo"}/>
                </div>

            </div>
            <div className={"grow hidden lg:flex items-center sm:hidden md:hidden"}>
                { menuItems.map(item => (
                  <Link key={item.path} to={item.path} className={"hover:text-gray-500 p-1 rounded"}>{ item.title}</Link>
                ))}
            </div>
            <div>
                <a onClick={logout} className={"cursor-pointer no-underline"}><FontAwesomeIcon icon={ faSignOut }/></a>
            </div>
        </div>
    </>
}

export default HeaderMenu;