'use client';

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

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>
      <PageHeader
        title="Drivers"
        description="Global driver roster and statistics."
        action={
          <Button 
            variant="secondary" 
            onClick={onViewLeaderboard}
          >
            Leaderboard
          </Button>
        }
      />

      <Container size="full" padding="none" py={8}>
        <DriverStatsHeader
          totalDrivers={viewData.totalDriversLabel}
          activeDrivers={viewData.activeCountLabel}
          totalRaces={viewData.totalRacesLabel}
        />
      </Container>

      <Container size="full" padding="none" py={6}>
        <Input
          placeholder="Search drivers by name or nationality..."
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          icon={Search}
          variant="search"
        />
      </Container>

      {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}
        />
      )}
    </main>
  );
}
