import {useAuth} from "../../context/AuthContext.tsx";
import {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();
    function logout() {
        auth.logout()
        navigate('/');
    }
    return <>
        <div className={"flex p-1 justify-between"}>
            <div className={"flex items-center"}>
                <div className={"w-16 h-16 lg:w-32 lg:h-32"}>
                    <img className={""} src={mainLogo} alt={"logo"}/>
                </div>

            </div>
            <div className={"grow hidden lg:flex items-center sm:hidden md:hidden"}>
                <p>Menu will be placed here</p>
            </div>
            <div>
                <a onClick={logout} className={"cursor-pointer no-underline"}><FontAwesomeIcon icon={ faSignOut }/></a>
            </div>
        </div>
    </>
}

export default HeaderMenu;