'use client';

import { DriversDirectoryHeader } from '@/components/drivers/DriversDirectoryHeader';
import { DriverSearchBar } from '@/components/drivers/DriverSearchBar';
import { DriverTable } from '@/components/drivers/DriverTable';
import { DriverTableRow } from '@/components/drivers/DriverTableRow';
import { EmptyState } from '@/ui/EmptyState';
import type { DriversViewData } from '@/lib/types/view-data/DriversViewData';
import { Container } from '@/ui/Container';
import { Stack } from '@/ui/Stack';
import { Search } from 'lucide-react';

interface DriversTemplateProps {
  viewData: DriversViewData | null;
  searchQuery: string;
  onSearchChange: (query: string) => void;
  filteredDrivers: DriversViewData['drivers'];
  onDriverClick: (id: string) => void;
  onViewLeaderboard: () => void;
}

export function DriversTemplate({ 
  viewData,
  searchQuery,
  onSearchChange,
  filteredDrivers,
  onDriverClick,
  onViewLeaderboard
}: DriversTemplateProps) {
  const drivers = viewData?.drivers || [];
  const totalRaces = viewData?.totalRaces || 0;
  const totalWins = viewData?.totalWins || 0;
  const activeCount = viewData?.activeCount || 0;

  return (
    <Container size="lg" py={8}>
      <Stack gap={10}>
        <DriversDirectoryHeader
          totalDrivers={drivers.length}
          activeDrivers={activeCount}
          totalWins={totalWins}
          totalRaces={totalRaces}
          onViewLeaderboard={onViewLeaderboard}
        />

        <DriverSearchBar query={searchQuery} onChange={onSearchChange} />

        <DriverTable>
          {filteredDrivers.map((driver, index) => (
            <DriverTableRow
              key={driver.id}
              rank={index + 1}
              name={driver.name}
              avatarUrl={driver.avatarUrl}
              nationality={driver.nationality}
              rating={driver.rating}
              wins={driver.wins}
              onClick={() => onDriverClick(driver.id)}
            />
          ))}
        </DriverTable>

        {filteredDrivers.length === 0 && (
          <EmptyState
            icon={Search}
            title="No drivers found"
            description={`No drivers found matching "${searchQuery}"`}
            action={{
              label: 'Clear search',
              onClick: () => onSearchChange(''),
              variant: 'secondary'
            }}
          />
        )}
      </Stack>
    </Container>
  );
}
