'use client';

import React, { useState } from 'react';
import { useRouter } from 'next/navigation';
import { DriverRankingsTemplate } from '@/templates/DriverRankingsTemplate';
import { routes } from '@/lib/routing/RouteConfig';
import type { DriverRankingsViewData } from '@/lib/view-data/DriverRankingsViewData';
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';

export function DriverRankingsPageClient({ viewData }: ClientWrapperProps<DriverRankingsViewData>) {
  const router = useRouter();
  const [searchQuery, setSearchQuery] = useState('');

  const handleDriverClick = (id: string) => {
    router.push(routes.driver.detail(id));
  };

  const handleBackToLeaderboards = () => {
    router.push(routes.leaderboards.root);
  };

  const filteredDrivers = viewData.drivers.filter(driver => 
    driver.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <DriverRankingsTemplate
      viewData={{
        ...viewData,
        drivers: filteredDrivers
      }}
      searchQuery={searchQuery}
      onSearchChange={setSearchQuery}
      onDriverClick={handleDriverClick}
      onBackToLeaderboards={handleBackToLeaderboards}
    />
  );
}