import { ServiceFactory } from '@/lib/services/ServiceFactory';
import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
import LeaderboardsInteractive from './LeaderboardsInteractive';
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';

// ============================================================================
// SERVER COMPONENT - Fetches data and passes to Interactive wrapper
// ============================================================================

export default async function LeaderboardsStatic() {
  // Create services for server-side data fetching
  const serviceFactory = new ServiceFactory(getWebsiteApiBaseUrl());
  const driverService = serviceFactory.createDriverService();
  const teamService = serviceFactory.createTeamService();

  // Fetch data server-side
  let drivers: DriverLeaderboardItemViewModel[] = [];
  let teams: TeamSummaryViewModel[] = [];

  try {
    const driversViewModel = await driverService.getDriverLeaderboard();
    drivers = driversViewModel.drivers;
    teams = await teamService.getAllTeams();
  } catch (error) {
    console.error('Failed to load leaderboard data:', error);
    drivers = [];
    teams = [];
  }

  // Pass data to Interactive wrapper which handles client-side interactions
  return <LeaderboardsInteractive drivers={drivers} teams={teams} />;
}