fixed a bit

app/(main)/team/[teamId]/page.js

@@ -0,0 +1,122 @@
+'use client'; // Mark as a Client Component
+import { useState, useEffect } from 'react';
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+export default function TeamPage({ params }) {
+    const { data: session, status } = useSession();
+    const [team, setTeam] = useState(null);
+    const [teamMembers, setTeamMembers] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const router = useRouter();
+    const { teamId } = params;
+
+    // Fetch team data
+    useEffect(() => {
+        async function fetchTeamData() {
+            try {
+                // Fetch team details
+                const teamResponse = await fetch(`/api/teams/${teamId}`);
+                if (!teamResponse.ok) {
+                    throw new Error('Failed to fetch team data');
+                }
+                const teamData = await teamResponse.json();
+                setTeam(teamData);
+
+                // Fetch team members
+                const membersResponse = await fetch(`/api/teams/${teamId}/members`);
+                if (!membersResponse.ok) {
+                    throw new Error('Failed to fetch team members');
+                }
+                const membersData = await membersResponse.json();
+                setTeamMembers(membersData);
+            } catch (err) {
+                console.error(err);
+                setError(err.message);
+            } finally {
+                setLoading(false);
+            }
+        }
+
+        if (status === 'authenticated') {
+            fetchTeamData();
+        }
+    }, [teamId, status]);
+
+    // Handle authentication
+    useEffect(() => {
+        if (status === 'unauthenticated') {
+            router.push('/login');
+        }
+    }, [status, router]);
+
+    if (status === 'loading' || loading) {
+        return <div className="loading">Loading...</div>;
+    }
+
+    if (error) {
+        return <div className="error">Error: {error}</div>;
+    }
+
+    if (!team) {
+        return <div className="error">Team not found</div>;
+    }
+
+    return (
+        <div className="team-page-container">
+            <div className="page-header">
+                <Link href="/team-selection" className="back-button">←</Link>
+                <div className="page-title">Team Details</div>
+                <div className="placeholder"></div>
+            </div>
+
+            <div className="team-details-card">
+                <h1>{team.name}</h1>
+
+                <div className="team-code-container">
+                    <h2>Team Code</h2>
+                    <div className="team-code">{team.code}</div>
+                    <p>Share this code with others to join your team</p>
+                </div>
+
+                <div className="team-members-container">
+                    <h2>Team Members</h2>
+                    {teamMembers.length === 0 ? (
+                        <p>No members have joined yet</p>
+                    ) : (
+                        <ul className="team-members-list">
+                            {teamMembers.map(member => (
+                                <li key={member.id} className="team-member">
+                                    {member.username}
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
+
+                <div className="team-actions">
+                    <Link href="/" className="team-button">
+                        Start Hunt
+                    </Link>
+                </div>
+            </div>
+
+            <div className="nav-bar">
+                <div className="nav-item">
+                    <div className="nav-icon">🏠</div>
+                </div>
+                <div className="nav-item">
+                    <div className="nav-icon">📊</div>
+                </div>
+                <div className="nav-item">
+                    <div className="nav-icon">🏆</div>
+                </div>
+                <div className="nav-item">
+                    <div className="nav-icon">👤</div>
+                </div>
+            </div>
+        </div>
+    );
+}