tremor-tracker/src/components/navbar.tsx

"use client";
import Image from "next/image";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Dispatch, SetStateAction, useMemo, useState } from "react";
import { FaRegUserCircle } from "react-icons/fa";

import { Currency } from "@appTypes/StoreModel";
import AuthModal from "@components/AuthModal";
import { useStoreActions, useStoreState } from "@hooks/store";

export default function Navbar({}: // currencySelector,
{
	// currencySelector?: { selectedCurrency: string; setSelectedCurrency: Dispatch<SetStateAction<"GBP" | "USD" | "EUR">> };
}) {
	const pathname = usePathname();
	const user = useStoreState((state) => state.user);
	const selectedCurrency = useStoreState((state) => state.currency.selectedCurrency);
	const setSelectedCurrency = useStoreActions((actions) => actions.currency.setSelectedCurrency);
	const navOptions = useMemo(() => ["Earthquakes", "Observatories", "Shop"], []);
	// const navOptions = useMemo(() => ["Earthquakes"], []);
	const aboutDropdown = ["Contact Us", "Our Mission", "The Team"];
	// { label: "Our Mission", path: "/our-mission" },
	// { label: "The Team", path: "/the-team" },
	// { label: "Contact Us", path: "/contact-us" }]
	const router = useRouter();

	const [isModalOpen, setIsModalOpen] = useState(false);

	const currencies = useStoreState((state) => state.currency.currencies);
	const currencyTickers = useStoreState((state) => state.currency.tickers);

	function NavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
		const isActive = dropdownItems
			? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`)
			: pathname === href;

		return (
			<button className="flex items-center justify-center px-2 py-4 relative group">
				{dropdownItems ? (
					<span
						className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "group-hover:bg-neutral-200"}`}
					>
						{name}
					</span>
				) : (
					<Link
						href={href}
						className={`px-4 py-1.5 rounded-md transition-colors ${isActive ? "bg-neutral-200" : "hover:bg-neutral-200"}`}
					>
						{name}
					</Link>
				)}
				{dropdownItems && (
					<div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-40 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
						<ul>
							{dropdownItems.map((item) => {
								const itemHref = `/${item.toLowerCase().replace(" ", "-")}`;
								const isDropdownActive = pathname === itemHref;
								return (
									<li key={item}>
										<Link
											href={itemHref}
											className={`block px-4 py-2 hover:bg-neutral-100 ${isDropdownActive ? "bg-neutral-100" : ""}`}
										>
											{item}
										</Link>
									</li>
								);
							})}
						</ul>
					</div>
				)}
			</button>
		);
	}

	function ManagementNavbarButton({ name, href, dropdownItems }: { name: string; href: string; dropdownItems?: string[] }) {
		const isActive = dropdownItems
			? dropdownItems.some((item) => pathname === `/${item.toLowerCase().replace(" ", "-")}`)
			: pathname === href;

		return (
			<button className="flex items-center justify-center px-2 py-4 relative group">
				<Link
					href={href}
					className={`px-3 py-1 border-2 rounded-md transition-colors ${
						isActive ? "border-neutral-500" : " hover:border-neutral-500"
					}`}
				>
					{name}
				</Link>
			</button>
		);
	}

	return (
		<div className="flex sticky top-0 w-full h-14 z-40 font-medium bg-white border border-b-neutral-200">
			<div className="my-1 flex aspect-square ml-3 mr-3">
				<Link href="/" className="rounded-full">
					<Image height={50} width={50} alt="Logo" className="border border-neutral-300 rounded-full" src="/logo.png" />
				</Link>
			</div>
			<div className="flex">
				{navOptions.map((name) => (
					<NavbarButton name={name} href={`/${name.toLowerCase()}`} key={name} />
				))}
				<NavbarButton name="About Us" href="/about" dropdownItems={aboutDropdown} />
			</div>
			<div className="flex-grow" />
			{pathname.includes("shop") && (
				<button className="flex items-center justify-center mr-3 py-4 relative group">
					<span className={`px-4 py-1.5 rounded-md transition-colors`}>{selectedCurrency}</span>

					<div className="absolute hidden group-hover:block top-full left-1/2 -translate-x-1/2 w-24 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
						<ul>
							{currencies.map((item) => {
								let ticker = currencyTickers[item];
								return (
									<li key={item} onClick={() => setSelectedCurrency(item)}>
										<div className={`block px-2 py-2 hover:bg-neutral-100 text-md`}>
											{item} ({ticker})
										</div>
									</li>
								);
							})}
						</ul>
					</div>
				</button>
			)}
			{user && (user.role === "SCIENTIST" || user.role === "ADMIN") && (
				<div className="flex h-full mr-5">
					<ManagementNavbarButton name="Warehouse" href="/warehouse"></ManagementNavbarButton>
				</div>
			)}
			{user && (user.role === "SCIENTIST" || user.role === "ADMIN") && (
				<div className="flex h-full mr-5">
					<ManagementNavbarButton name="Scientist Management" href="/management"></ManagementNavbarButton>
				</div>
			)}
			{user && user.role === "ADMIN" && (
				<div className="flex h-full mr-5">
					<ManagementNavbarButton name="Admin" href="/administrator"></ManagementNavbarButton>
				</div>
			)}
			<button className="my-auto mr-4" onClick={() => (user ? router.push("/profile") : setIsModalOpen(true))}>
				<FaRegUserCircle size={22} />
			</button>
			<AuthModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
		</div>
	);
}