'use client';

import React from 'react';
import { Text } from '@/ui/Text';
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
import { Badge } from '@/ui/Badge';

interface Entrant {
  id: string;
  name: string;
  teamName?: string;
  carName: string;
  rating: number;
  status: 'confirmed' | 'withdrawn' | 'pending';
}

interface EntrantsTableProps {
  entrants: Entrant[];
}

export function EntrantsTable({ entrants }: EntrantsTableProps) {
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableHeader>Driver</TableHeader>
          <TableHeader>Team</TableHeader>
          <TableHeader>Car</TableHeader>
          <TableHeader textAlign="right">Rating</TableHeader>
          <TableHeader textAlign="right">Status</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        {entrants.map((entrant) => (
          <TableRow key={entrant.id}>
            <TableCell>
              <Text size="sm" weight="bold">{entrant.name}</Text>
            </TableCell>
            <TableCell>
              <Text size="xs" color="text-gray-400">{entrant.teamName || '-'}</Text>
            </TableCell>
            <TableCell>
              <Text size="xs" color="text-gray-400">{entrant.carName}</Text>
            </TableCell>
            <TableCell textAlign="right">
              <Text size="xs" font="mono" color="text-telemetry-aqua">{entrant.rating}</Text>
            </TableCell>
            <TableCell textAlign="right">
              <Badge 
                variant={
                  entrant.status === 'confirmed' 
                    ? 'success'
                    : entrant.status === 'withdrawn'
                    ? 'danger'
                    : 'warning'
                } 
                size="sm"
              >
                {entrant.status.toUpperCase()}
              </Badge>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}