'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { DriversTemplate } from '@/templates/DriversTemplate';
import { useDriverLeaderboard } from '@/hooks/useDriverService';
import { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';

export function DriversInteractive() {
  const router = useRouter();
  const { data: viewModel, isLoading: loading } = useDriverLeaderboard();
  
  const drivers = viewModel?.drivers || [];
  const totalRaces = viewModel?.totalRaces || 0;
  const totalWins = viewModel?.totalWins || 0;
  const activeCount = viewModel?.activeCount || 0;

  // Transform data for template
  const driverViewModels = drivers.map((driver, index) => 
    new DriverLeaderboardItemViewModel(driver, index + 1)
  );

  return (
    <DriversTemplate
      drivers={driverViewModels}
      totalRaces={totalRaces}
      totalWins={totalWins}
      activeCount={activeCount}
      isLoading={loading}
    />
  );
}