'use client';

import { useRouter } from 'next/navigation';
import LeaderboardsTemplate from '@/templates/LeaderboardsTemplate';
import type { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';

interface LeaderboardsPageData {
  drivers: DriverLeaderboardViewModel | null;
  teams: TeamSummaryViewModel[] | null;
}

export function LeaderboardsPageWrapper({ data }: { data: LeaderboardsPageData | null }) {
  const router = useRouter();
  
  if (!data || (!data.drivers && !data.teams)) {
    return null;
  }

  const drivers = data.drivers?.drivers || [];
  const teams = data.teams || [];

  const handleDriverClick = (driverId: string) => {
    router.push(`/drivers/${driverId}`);
  };

  const handleTeamClick = (teamId: string) => {
    router.push(`/teams/${teamId}`);
  };

  const handleNavigateToDrivers = () => {
    router.push('/leaderboards/drivers');
  };

  const handleNavigateToTeams = () => {
    router.push('/teams/leaderboard');
  };

  return (
    <LeaderboardsTemplate
      drivers={drivers}
      teams={teams}
      onDriverClick={handleDriverClick}
      onTeamClick={handleTeamClick}
      onNavigateToDrivers={handleNavigateToDrivers}
      onNavigateToTeams={handleNavigateToTeams}
    />
  );
}