"use client";

import { useEffect, useState } from "react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
import NavPages from "./NavPages";

const Navbar = () => {
  const [currentPage, setCurrentPage] = useState("/");
  const [isTopOfPage, setIsTopOfPage] = useState(true);
  const [menuActive, setMenuActive] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY === 0) {
        setIsTopOfPage(true);
      } else {
        setIsTopOfPage(false);
      }
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <nav
      className={
        "bg-primary-500 text-primary-100 fixed top-0  w-full " +
        (isTopOfPage
          ? "bg-transparent"
          : "z-40 bg-opacity-75 backdrop-blur-sm drop-shadow")
      }
    >
      <div className="mx-auto w-11/12 lg:w-5/6 flex justify-between items-center">
        <div
          className={
            "font-cormorant text-2xl p-5 " +
            (isTopOfPage ? "text-transparent select-none" : "")
          }
        >
          Richard A. Feely, DO
        </div>

        {/* Burger icon */}
        <div className="md:hidden w-[30px] text-tertiary-300">
          <Bars3Icon onClick={() => setMenuActive((e) => !e)}></Bars3Icon>
        </div>
        {/* Burger menu */}
        {menuActive ? (
          <div className="text-lg animate-fadeIn z-50 fixed top-0 right-0  h-screen bg-secondary-500 drop-shadow-lg ">
            <div className="px-12 py-5 flex flex-col gap-6 text-primary-500 text-right">
              <div className="pb-3 flex justify-end ">
                <XMarkIcon
                  className="w-[30px]"
                  onClick={() => setMenuActive((e) => !e)}
                ></XMarkIcon>
              </div>
              <NavPages
                currentPage={currentPage}
                setCurrentPage={setCurrentPage}
                currentPageClasses="text-primary-100"
              ></NavPages>
            </div>
          </div>
        ) : (
          <></>
        )}

        {/* Nav Bar */}
        <div
          className={
            "hidden md:flex font-abel tems-center gap-6 text-lg text-tertiary-300 " +
            (isTopOfPage ? "px-5 py-24" : "p-5")
          }
        >
          <NavPages
            currentPage={currentPage}
            setCurrentPage={setCurrentPage}
            currentPageClasses="text-secondary-500"
          ></NavPages>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;