import { useEffect, useState } from "react";

import Logo from "../../assets/logo.svg";

export default () => {
  const [state, setState] = useState(false);
  const [colorChange, setColorChange] = useState(false);
  const [isNavbarCollapsed, setIsNavbarCollapsed] = useState(
    window.innerWidth <= 768
  );

  const changeColor = () => {
    if (window.scrollY >= 100) {
      setColorChange(true);
    } else {
      setColorChange(false);
    }
  };

  const checkNavbarCollapse = () => {
    if (window.innerWidth <= 768) {
      setIsNavbarCollapsed(true);
    } else {
      setIsNavbarCollapsed(false);
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", changeColor);
    window.addEventListener("resize", checkNavbarCollapse);
    return () => {
      window.removeEventListener("scroll", changeColor);
      window.removeEventListener("resize", checkNavbarCollapse);
    };
  }, []);

  // Replace javascript:void(0) path with your path
  const navigation = [
    { title: "Services", path: "#Services" },
    { title: "Contact", path: "javascript:void(0)" },
  ];

  return (
    <nav
      className={`${
        colorChange
          ? "bg-black bg-opacity-80 transition duration-500 w-full border-0 sticky top-0 z-10"
          : "z-10"
      }`}
    >
      <div className="items-center px-4 max-w-screen-xl mx-auto md:flex md:px-8">
        <div className="flex items-center justify-center md:justify-between py-3 md:py-5 md:block">
          {isNavbarCollapsed ? (
            <button
              className="outline-none p-2 rounded-md focus:border-gray-400 focus:border"
              onClick={() => setState(!state)}
            >
              <img src={Logo} width={60} height={60} alt="logo" />
            </button>
          ) : (
            <a href="/">
              <img src={Logo} width={60} height={60} alt="logo" />
            </a>
          )}
        </div>
        <div
          className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
            state ? "block" : "hidden"
          }`}
        >
          <ul className="text-text-gold justify-center items-center space-y-8 md:flex md:space-x-6 md:space-y-0">
            {navigation.map((item, idx) => {
              return (
                <li key={idx} className="hover:text-white">
                  <a
                    href={item.path}
                    className="block py-2 md:py-0 md:px-4 text-xl font-medium$"
                  >
                    {item.title}
                  </a>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </nav>
  );
};
