'use client';

import { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
import { DriversTemplate } from '@/templates/DriversTemplate';

// Shared state components
import { StateContainer } from '@/components/shared/state/StateContainer';
import { useDriverLeaderboard } from '@/hooks/driver/useDriverLeaderboard';
import { Users } from 'lucide-react';

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

  // TODO this should not be done in a page, thats part of the service??
  // Transform data for template
  const driverViewModels = drivers.map((driver, index) =>
    new DriverLeaderboardItemViewModel(driver, index + 1)
  );

  return (
    <StateContainer
      data={viewModel}
      isLoading={loading}
      error={error}
      retry={retry}
      config={{
        loading: { variant: 'skeleton', message: 'Loading driver leaderboard...' },
        error: { variant: 'inline' },
        empty: {
          icon: Users,
          title: 'No drivers found',
          description: 'There are no drivers in the system yet',
        }
      }}
    >
      {() => (
        <DriversTemplate
          drivers={driverViewModels}
          totalRaces={totalRaces}
          totalWins={totalWins}
          activeCount={activeCount}
          isLoading={false}
        />
      )}
    </StateContainer>
  );
 }