import { Card } from '@/ui/Card';
import { DriverEntryRow } from '@/ui/DriverEntryRow';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Surface } from '@/ui/Surface';
import { Text } from '@/ui/Text';
import { Users } from 'lucide-react';

interface Entry {
  id: string;
  name: string;
  avatarUrl: string;
  country: string;
  rating?: number | null;
  isCurrentUser: boolean;
}

interface RaceEntryListProps {
  entries: Entry[];
  onDriverClick: (driverId: string) => void;
}

export function RaceEntryList({ entries, onDriverClick }: RaceEntryListProps) {
  return (
    <Card>
      <Stack gap={4}>
        <Stack direction="row" align="center" justify="between">
          <Heading level={2} icon={<Icon icon={Users} size={5} color="rgb(59, 130, 246)" />}>Entry List</Heading>
          <Text size="sm" color="text-gray-400">{entries.length} drivers</Text>
        </Stack>

        {entries.length === 0 ? (
          <Stack align="center" py={8} gap={3}>
            <Surface variant="muted" rounded="full" p={4}>
              <Icon icon={Users} size={6} color="rgb(82, 82, 82)" />
            </Surface>
            <Text color="text-gray-400">No drivers registered yet</Text>
          </Stack>
        ) : (
          <Stack gap={1}>
            {entries.map((driver, index) => (
              <DriverEntryRow
                key={driver.id}
                index={index}
                name={driver.name}
                avatarUrl={driver.avatarUrl}
                country={driver.country}
                rating={driver.rating}
                isCurrentUser={driver.isCurrentUser}
                onClick={() => onDriverClick(driver.id)}
              />
            ))}
          </Stack>
        )}
      </Stack>
    </Card>
  );
}