gridpilot.gg/apps/website/templates/DriversTemplate.tsx

import { DriverCard } from '@/components/drivers/DriverCard';
import { DriverGrid } from '@/components/drivers/DriverGrid';
import { DriverStatsHeader } from '@/components/drivers/DriverStatsHeader';
import { DriversViewData } from '@/lib/view-data/DriversViewData';
import { Button } from '@/ui/Button';
import { EmptyState } from '@/ui/EmptyState';
import { Input } from '@/ui/Input';
import { PageHeader } from '@/ui/PageHeader';
import { Section } from '@/ui/Section';
import { Stack } from '@/ui/Stack';
import { Search, Users } from 'lucide-react';

interface DriversTemplateProps {
  viewData: DriversViewData;
  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) {
  return (
    <main>
      <Section variant="default" padding="md">
        <PageHeader
          title="Drivers"
          description="Global driver roster and statistics."
          icon={Users}
          action={
            <Button 
              variant="secondary" 
              onClick={onViewLeaderboard}
            >
              Leaderboard
            </Button>
          }
        />

        <Stack gap={12}>
          <DriverStatsHeader
            totalDrivers={viewData.totalDriversLabel}
            activeDrivers={viewData.activeCountLabel}
            totalRaces={viewData.totalRacesLabel}
          />

          <Input
            data-testid="driver-search-input"
            placeholder="Search drivers by name or nationality..."
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            icon={Search}
            variant="search"
          />

          {filteredDrivers.length > 0 ? (
            <DriverGrid>
              {filteredDrivers.map(driver => (
                <DriverCard
                  key={driver.id}
                  driver={driver}
                  onClick={onDriverClick}
                />
              ))}
            </DriverGrid>
          ) : (
            <EmptyState
              title="No drivers found"
              description={`No drivers match "${searchQuery}"`}
              icon={Search}
            />
          )}
        </Stack>
      </Section>
    </main>
  );
}