import React, { useEffect } from "react";
import Link from "next/link";
import { useAuth } from "../../hooks/auth";

function MobileHeader() {
  const { isLogin } = useAuth(false);

  useEffect(() => {
    const node = document.querySelector(".menu-shadow");

    if (!node) return;

    const closeMenu = () => {
      document.querySelector(".layout")?.classList.remove("open-menu");
      history.pushState("menu", "");
    };
    node.addEventListener("click", closeMenu, false);

    return () => {
      node.removeEventListener("click", closeMenu);
    };
  }, []);

  return (
    <div className="mobile-menu-container">
      <div className="menu-shadow" />
      <div className="bg-white shadow dark:bg-gray-800">
        <div className="container px-6 py-4 mx-auto md:flex md:justify-between md:items-center">
          <div className="flex items-center justify-between">
            <div className="flex md:hidden">
              <button
                type="button"
                className="text-gray-500 mobile-menu dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400"
                aria-label="toggle menu"
              >
                <svg viewBox="0 0 24 24" className="w-6 h-6 fill-current">
                  <path
                    fillRule="evenodd"
                    d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
                  ></path>
                </svg>
              </button>
            </div>

            <div>
              <Link href={isLogin ? "/guilds" : "/"}>
                <a className="text-2xl font-bold text-gray-800 transition-colors duration-200 transform dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300">
                  صنفینو
                </a>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default MobileHeader;