'use client';

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

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}>
      <TableCell textAlign="center">
        <Text 
          size="sm" 
          weight="bold" 
          mono
          variant={rank <= 3 ? 'warning' : 'low'}
        >
          {rank.toString().padStart(2, '0')}
        </Text>
      </TableCell>
      <TableCell>
        <Box display="flex" alignItems="center" gap={3}>
          <Avatar 
            src={avatarUrl || undefined} 
            alt={name} 
            size="sm"
          />
          <Text 
            size="sm" 
            weight="semibold" 
            variant="high"
          >
            {name}
          </Text>
        </Box>
      </TableCell>
      <TableCell>
        <Box display="flex" alignItems="center" gap={2}>
          <CountryFlag countryCode={nationality} size="sm" />
          <Text size="xs" variant="low" uppercase>{nationality}</Text>
        </Box>
      </TableCell>
      <TableCell textAlign="right">
        <Box display="flex" alignItems="center" justifyContent="end" gap={2}>
          <Text size="xs" variant="low" mono>{rating}</Text>
          <RatingBadge rating={rating} ratingLabel={ratingLabel} size="sm" />
        </Box>
      </TableCell>
      <TableCell textAlign="right">
        <Text size="sm" weight="bold" mono variant="success">
          {winsLabel}
        </Text>
      </TableCell>
    </TableRow>
  );
}