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 - only redirect for map page
  const handleMapClick = (e) => {
    if (huntActive === false) {
      e.preventDefault();
      router.push("/waiting");
    }
  };

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

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

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

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