import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

interface RankingListItemProps {
  name: string;
  type: 'overall' | 'league';
  rank: number;
  totalDrivers: number;
  percentile: number;
  rating: number;
}

export function RankingListItem({
  name,
  type,
  rank,
  totalDrivers,
  percentile,
  rating,
}: RankingListItemProps) {
  return (
    <Stack
      display="flex"
      alignItems="center"
      justifyContent="between"
      py={2}
      px={3}
      rounded="lg"
      bg="bg-deep-graphite/60"
    >
      <Stack gap={0}>
        <Text size="sm" weight="medium" color="text-white">
          {name}
        </Text>
        <Text size="xs" color="text-gray-400">
          {type === 'overall' ? 'Overall' : 'League'} ranking
        </Text>
      </Stack>

      <Stack display="flex" alignItems="center" gap={6} textAlign="right">
        <Stack>
          <Text color="text-primary-blue" size="base" weight="semibold" block>
            #{rank}
          </Text>
          <Text color="text-gray-500" size="xs" block>Position</Text>
        </Stack>
        <Stack>
          <Text color="text-white" size="sm" weight="semibold" block>
            {totalDrivers}
          </Text>
          <Text color="text-gray-500" size="xs" block>Drivers</Text>
        </Stack>
        <Stack>
          <Text color="text-green-400" size="sm" weight="semibold" block>
            {percentile.toFixed(1)}%
          </Text>
          <Text color="text-gray-500" size="xs" block>Percentile</Text>
        </Stack>
        <Stack>
          <Text color="text-warning-amber" size="sm" weight="semibold" block>
            {rating}
          </Text>
          <Text color="text-gray-500" size="xs" block>Rating</Text>
        </Stack>
      </Stack>
    </Stack>
  );
}