'use client';

import { DriversViewData } from '@/lib/types/view-data/DriversViewData';
import { DriverCard } from '@/components/drivers/DriverCard';
import { DriverStatsHeader } from '@/components/drivers/DriverStatsHeader';
import { PageHeader } from '@/ui/PageHeader';
import { Input } from '@/ui/Input';
import { Box } from '@/ui/Box';
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>
      <Box marginBottom={8}>
        <PageHeader
          icon={Users}
          title="Drivers"
          description="Global driver roster and statistics."
          action={
            <Box 
              as="button" 
              onClick={onViewLeaderboard}
              className="px-4 py-2 rounded-md bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] text-sm font-medium hover:bg-[var(--ui-color-bg-surface-muted)] transition-colors"
            >
              Leaderboard
            </Box>
          }
        />
      </Box>

      <Box marginBottom={8}>
        <DriverStatsHeader
          totalDrivers={viewData.totalDriversLabel}
          activeDrivers={viewData.activeCountLabel}
          totalRaces={viewData.totalRacesLabel}
        />
      </Box>

      <Box marginBottom={6} className="w-full">
        <Input
          placeholder="Search drivers by name or nationality..."
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          icon={Search}
          variant="search"
        />
      </Box>

      {filteredDrivers.length > 0 ? (
        <Box display="grid" gap={4} className="grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {filteredDrivers.map(driver => (
            <DriverCard
              key={driver.id}
              driver={driver}
              onClick={onDriverClick}
            />
          ))}
        </Box>
      ) : (
        <EmptyState
          title="No drivers found"
          description={`No drivers match "${searchQuery}"`}
          icon={Search}
        />
      )}
    </main>
  );
}
