import { LeaguesTemplate } from '@/templates/LeaguesTemplate';
import { ServiceFactory } from '@/lib/services/ServiceFactory';
import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';

export default async function LeaguesStatic() {
  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
  const leagueService = serviceFactory.createLeagueService();
  
  let leagues: LeagueSummaryViewModel[] = [];
  let loading = false;

  try {
    loading = true;
    leagues = await leagueService.getAllLeagues();
  } catch (error) {
    console.error('Failed to load leagues:', error);
  } finally {
    loading = false;
  }

  // Server components can't have event handlers, so we provide empty functions
  // The Interactive wrapper will add the actual handlers
  return (
    <LeaguesTemplate
      leagues={leagues}
      loading={loading}
      onLeagueClick={() => {}}
      onCreateLeagueClick={() => {}}
    />
  );
}