'use client';

import React from 'react';
import { useRouter } from 'next/navigation';
import { DriversTemplate } from '@/templates/DriversTemplate';
import { useDriverSearch } from '@/lib/hooks/useDriverSearch';
import type { DriverLeaderboardViewModel } from '@/lib/view-data/DriverLeaderboardViewModel';

interface DriversPageClientProps {
  data: DriverLeaderboardViewModel | null;
}

export function DriversPageClient({ data }: DriversPageClientProps) {
  const router = useRouter();
  const drivers = data?.drivers || [];
  const { searchQuery, setSearchQuery, filteredDrivers } = useDriverSearch(drivers);

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

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

  return (
    <DriversTemplate
      data={data}
      searchQuery={searchQuery}
      onSearchChange={setSearchQuery}
      filteredDrivers={filteredDrivers}
      onDriverClick={handleDriverClick}
      onViewLeaderboard={handleViewLeaderboard}
    />
  );
}