import { DriverEntryRow } from '@/components/drivers/DriverEntryRow';
import { Panel } from '@/ui/Panel';
import { EmptyState } from '@/ui/EmptyState';
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 (
    <Panel 
      title="Entry List" 
      actions={<Text size="sm" variant="low">{entries.length} drivers</Text>}
    >
      {entries.length === 0 ? (
        <EmptyState
          icon={Users}
          title="No drivers registered yet"
          variant="minimal"
        />
      ) : (
        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)}
          />
        ))
      )}
    </Panel>
  );
}