'use client';

import { RatingBadge } from '@/components/drivers/RatingBadge';
import { Image } from '@/ui/Image';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { TableRow, TableCell } from '@/ui/Table';
import { Avatar } from '@/ui/Avatar';

interface DriverTableRowProps {
  rank: number;
  name: string;
  avatarUrl?: string | null;
  nationality: string;
  rating: number;
  ratingLabel: string;
  winsLabel: string;
  onClick: () => void;
}

export function DriverTableRow({
  rank,
  name,
  avatarUrl,
  nationality,
  rating,
  ratingLabel,
  winsLabel,
  onClick,
}: DriverTableRowProps) {
  return (
    <TableRow onClick={onClick} clickable>
      <TableCell textAlign="center">
        <Text 
          size="sm" 
          weight="bold" 
          font="mono" 
          variant={rank <= 3 ? 'warning' : 'low'}
        >
          {rank}
        </Text>
      </TableCell>
      <TableCell>
        <Stack direction="row" align="center" gap={3}>
          <Avatar 
            src={avatarUrl || undefined} 
            alt={name} 
            size="sm"
          />
          <Text 
            size="sm" 
            weight="semibold" 
            variant="high"
          >
            {name}
          </Text>
        </Stack>
      </TableCell>
      <TableCell>
        <Text size="xs" variant="low">{nationality}</Text>
      </TableCell>
      <TableCell textAlign="right">
        <RatingBadge rating={rating} ratingLabel={ratingLabel} size="sm" />
      </TableCell>
      <TableCell textAlign="right">
        <Text size="sm" weight="semibold" font="mono" variant="success">
          {winsLabel}
        </Text>
      </TableCell>
    </TableRow>
  );
}