import { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
import TeamsTemplate from '@/templates/TeamsTemplate';

// This is a server component that fetches data server-side
// It will be used by the page.tsx when server-side rendering is needed

interface TeamsStaticProps {
  teams: TeamSummaryViewModel[];
  isLoading?: boolean;
}

export default function TeamsStatic({ teams, isLoading = false }: TeamsStaticProps) {
  // Calculate derived data that would normally be done in the template
  const teamsBySkillLevel = teams.reduce(
    (acc, team) => {
      const level = team.performanceLevel || 'intermediate';
      if (!acc[level]) {
        acc[level] = [];
      }
      acc[level].push(team);
      return acc;
    },
    {
      beginner: [],
      intermediate: [],
      advanced: [],
      pro: [],
    } as Record<string, TeamSummaryViewModel[]>,
  );

  const topTeams = [...teams]
    .sort((a, b) => a.name.localeCompare(b.name))
    .slice(0, 5);

  const recruitingCount = teams.filter((t) => t.isRecruiting).length;

  // For static rendering, we don't have interactive state
  // So we pass empty values and handlers that won't be used
  return (
    <TeamsTemplate
      teams={teams}
      isLoading={isLoading}
      searchQuery=""
      showCreateForm={false}
      teamsByLevel={teamsBySkillLevel}
      topTeams={topTeams}
      recruitingCount={recruitingCount}
      filteredTeams={teams}
      onSearchChange={() => {}}
      onShowCreateForm={() => {}}
      onHideCreateForm={() => {}}
      onTeamClick={() => {}}
      onCreateSuccess={() => {}}
      onBrowseTeams={() => {}}
      onSkillLevelClick={() => {}}
    />
  );
}