'use client';

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

interface LeaderboardsInteractiveProps {
  drivers: DriverLeaderboardItemViewModel[];
  teams: TeamSummaryViewModel[];
}

export default function LeaderboardsInteractive({ drivers, teams }: LeaderboardsInteractiveProps) {
  const router = useRouter();

  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}
    />
  );
}