peworkshop/components/NavBar.js

"use client";
import { useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import styles from "@/app/(main)/map/map.module.css";

export default function NavBar({ activeLink, teamData }) {
  const [huntActive, setHuntActive] = useState(null);
  const router = useRouter();

  // Check if hunt is active
  useEffect(() => {
    const checkHuntStatus = async () => {
      try {
        const timestamp = Date.now();
        const response = await fetch(`/api/hunt-status?t=${timestamp}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            "Cache-Control": "no-store, no-cache, must-revalidate",
            Pragma: "no-cache",
          },
          credentials: "include",
        });

        if (response.ok) {
          const data = await response.json();
          setHuntActive(data.active);
        }
      } catch (err) {
        console.error("Failed to check hunt status:", err);
      }
    };

    checkHuntStatus();
  }, []);

  // Handle map link click
  const handleMapClick = (e) => {
    if (huntActive === false) {
      e.preventDefault();
      router.push("/waiting");
    }
  };

  return (
    <nav className={styles["nav-bar"]}>
      <Link
        href="/map"
        className={`${styles["nav-item"]} ${
          activeLink === "map" ? styles["active"] : ""
        }`}
        onClick={handleMapClick}
      >
        <div className={styles["nav-icon"]}>🗺️</div>
        <div className={styles["nav-label"]}>Map</div>
      </Link>

      <Link
        href="/stats"
        className={`${styles["nav-item"]} ${
          activeLink === "stats" ? styles["active"] : ""
        }`}
      >
        <div className={styles["nav-icon"]}>📊</div>
        <div className={styles["nav-label"]}>Stats</div>
      </Link>

      <Link
        href={teamData?.team ? `/${teamData.team.id}` : "/team-selection"}
        className={`${styles["nav-item"]} ${
          activeLink === "team" ? styles["active"] : ""
        }`}
      >
        <div className={styles["nav-icon"]}>👥</div>
        <div className={styles["nav-label"]}>Team</div>
      </Link>

      <Link
        href="/leaderboard"
        className={`${styles["nav-item"]} ${
          activeLink === "leaderboard" ? styles["active"] : ""
        }`}
      >
        <div className={styles["nav-icon"]}>🏆</div>
        <div className={styles["nav-label"]}>Leaderboard</div>
      </Link>
    </nav>
  );
}