'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
          totalDriversLabel={viewData?.totalDriversLabel || '0'}
          activeDriversLabel={viewData?.activeCountLabel || '0'}
          totalWinsLabel={viewData?.totalWinsLabel || '0'}
          totalRacesLabel={viewData?.totalRacesLabel || '0'}
          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}
              ratingLabel={driver.ratingLabel}
              winsLabel={String(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>
  );
}