peworkshop/components/TeamHeader.js

"use client";
import { useSession } from "next-auth/react";
import { useState, useEffect } from "react";

export default function TeamHeader() {
  const { data: session } = useSession();
  const [teamName, setTeamName] = useState(null);

  useEffect(() => {
    // Only fetch team info if user is logged in and not an admin
    if (session?.user?.teamId && session?.user?.role !== "admin") {
      fetchTeamInfo();
    }
  }, [session]);

  const fetchTeamInfo = async () => {
    try {
      const response = await fetch(`/api/teams/${session.user.teamId}`);
      if (response.ok) {
        const data = await response.json();
        setTeamName(data.name);
      }
    } catch (error) {
      console.error("Failed to fetch team info:", error);
    }
  };

  // Don't render anything if no team name or user is admin
  if (!teamName || session?.user?.role === "admin") {
    return null;
  }

  return (
    <div className="team-header">
      <div className="team-name">Team Name: {teamName}</div>
    </div>
  );
}