'use client';

import { RatingBadge } from '@/components/drivers/RatingBadge';
import { Image } from '@/ui/Image';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/primitives/Stack';

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

export function DriverTableRow({
  rank,
  name,
  avatarUrl,
  nationality,
  rating,
  wins,
  onClick,
}: DriverTableRowProps) {
  const defaultAvatar = 'https://cdn.gridpilot.com/avatars/default.png';

  return (
    <Stack 
      as="tr" 
      onClick={onClick}
      cursor="pointer"
      transition
      hoverBg="bg-primary-blue/5"
      group
      borderBottom
      borderColor="border-charcoal-outline/50"
    >
      <Stack as="td" px={6} py={4} textAlign="center">
        <Text 
          size="sm" 
          weight="bold" 
          font="mono" 
          color={rank <= 3 ? 'text-warning-amber' : 'text-gray-500'}
        >
          {rank}
        </Text>
      </Stack>
      <Stack as="td" px={6} py={4}>
        <Stack direction="row" align="center" gap={3}>
          <Stack position="relative" h="8" w="8" overflow="hidden" rounded="full" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal">
            <Image 
              src={avatarUrl || defaultAvatar} 
              alt={name} 
              fill 
              objectFit="cover"
            />
          </Stack>
          <Text 
            size="sm" 
            weight="semibold" 
            color="text-white" 
            groupHoverTextColor="text-primary-blue" 
            transition
          >
            {name}
          </Text>
        </Stack>
      </Stack>
      <Stack as="td" px={6} py={4}>
        <Text size="xs" color="text-gray-400">{nationality}</Text>
      </Stack>
      <Stack as="td" px={6} py={4} textAlign="right">
        <RatingBadge rating={rating} size="sm" />
      </Stack>
      <Stack as="td" px={6} py={4} textAlign="right">
        <Text size="sm" weight="semibold" font="mono" color="text-performance-green">
          {wins}
        </Text>
      </Stack>
    </Stack>
  );
}