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">{teamName}</div>
        </div>
    );
}