"use client";

import { WebSettingContext } from "@/context/webSettingContext";
import MenuIcon from "@/public/icons/MenuIcon";
import MoonIcon from "@/public/icons/MoonIcon";
import SearchIcon from "@/public/icons/SearchIcon";
import SunIcon from "@/public/icons/SunIcon";
import XIcon from "@/public/icons/XIcon";
// import { useTheme } from "next-themes";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { Fragment, useContext, useEffect, useState } from "react";
import NavItems from "../common/navItems/NavItems";
import SideBar from "../sideBar/SideBar";
import bdtask from "../../public/images/Bdtask-Logo-blk.png";
import bdtask_dark from "../../public/images/Bdtask-Logo-white.png";
// import NavbarSkeleton from "../skeleton/NavbarSkeleton";
import TopNavBar from "./TopNavBar";

const NavBar = () => {
  // const { theme, setTheme } = useTheme();
  const [showSidebar, setShowSidebar] = useState(false);
  const [enabled, setEnabled] = useState(false);
  const [showSearch, setShowSearch] = useState(false);
  const [searchText, setSearchText] = useState("");
  const { data, isLoading } = useContext(WebSettingContext);
  const [activeMenu, setActiveMenu] = useState<string | undefined>("");
  const logo = data?.logo;
  const router = useRouter();



  return (
    <Fragment>

      <div className="container mx-auto">
        <TopNavBar />
      </div>
      <header className="sticky top-0 z-10 bg-[#292929] dark:bg-gray-900 shadow-[0px_1px_2px_rgba(0,0,0,0.2)] overflow-visible">
        <div className="container px-4 py-1 mx-auto">
          <div className="flex items-center justify-between">
            <NavItems
              setActiveMenu={setActiveMenu}
              activeMenu={activeMenu || ""}
            />
          </div>
        </div>
      </header>
    </Fragment>
  );
};

export default NavBar;