gridpilot.gg/apps/website/components/leaderboards/DriverLeaderboardPreview.tsx

import React from 'react';
import { Trophy, ChevronRight } from 'lucide-react';
import { Button } from '@/ui/Button';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/Stack';
import { Image } from '@/ui/Image';
import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
import { RatingDisplay } from '@/lib/display-objects/RatingDisplay';
import { RankMedal } from './RankMedal';
import { LeaderboardTableShell } from './LeaderboardTableShell';

interface DriverLeaderboardPreviewProps {
  drivers: {
    id: string;
    name: string;
    rating: number;
    skillLevel: string;
    nationality: string;
    wins: number;
    rank: number;
    avatarUrl: string;
    position: number;
  }[];
  onDriverClick: (id: string) => void;
  onNavigateToDrivers: () => void;
}

export function DriverLeaderboardPreview({ drivers, onDriverClick, onNavigateToDrivers }: DriverLeaderboardPreviewProps) {
  const top10 = drivers; // Already sliced in builder

  return (
    <LeaderboardTableShell>
      <Box 
        display="flex" 
        alignItems="center" 
        justifyContent="between" 
        px={5} 
        py={4} 
        borderBottom 
        borderColor="border-charcoal-outline/50" 
        bg="bg-deep-charcoal/40"
      >
        <Box display="flex" alignItems="center" gap={3}>
          <Box 
            display="flex" 
            h="10" 
            w="10" 
            alignItems="center" 
            justifyContent="center" 
            rounded="lg" 
            bg="bg-gradient-to-br from-primary-blue/15 to-primary-blue/5" 
            border 
            borderColor="border-primary-blue/20"
          >
            <Icon icon={Trophy} size={5} color="text-primary-blue" />
          </Box>
          <Box>
            <Heading level={3} fontSize="lg" weight="bold" color="text-white" letterSpacing="tight">Driver Rankings</Heading>
            <Text size="xs" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Top Performers</Text>
          </Box>
        </Box>
        <Button
          variant="secondary"
          onClick={onNavigateToDrivers}
          size="sm"
          hoverBg="bg-primary-blue/10"
          transition
        >
          <Stack direction="row" align="center" gap={2}>
            <Text size="sm" weight="medium">View All</Text>
            <Icon icon={ChevronRight} size={4} />
          </Stack>
        </Button>
      </Box>

      <Stack gap={0}>
        {top10.map((driver, index) => {
          const position = index + 1;
          const isLast = index === top10.length - 1;

          return (
            <Box
              key={driver.id}
              as="button"
              type="button"
              onClick={() => onDriverClick(driver.id)}
              display="flex"
              alignItems="center"
              gap={4}
              px={5}
              py={3}
              w="full"
              textAlign="left"
              transition
              hoverBg="bg-white/[0.02]"
              group
              borderBottom={!isLast}
              borderColor="border-charcoal-outline/30"
            >
              <Box w="8" display="flex" justifyContent="center">
                <RankMedal rank={position} size="sm" />
              </Box>

              <Box 
                position="relative" 
                w="9" 
                h="9" 
                rounded="full" 
                overflow="hidden" 
                border 
                borderWidth="1px" 
                borderColor="border-charcoal-outline" 
                groupHoverBorderColor="primary-blue/50" 
                transition
              >
                <Image src={driver.avatarUrl} alt={driver.name} fullWidth fullHeight objectFit="cover" />
              </Box>

              <Box flexGrow={1} minWidth="0">
                <Text 
                  weight="semibold" 
                  color="text-white" 
                  truncate 
                  groupHoverTextColor="text-primary-blue" 
                  transition 
                  block
                >
                  {driver.name}
                </Text>
                <Box display="flex" alignItems="center" gap={2}>
                  <Text size="xs" color="text-gray-500">{driver.nationality}</Text>
                  <Box w="1" h="1" rounded="full" bg="bg-gray-700" />
                  <Box as="span" color={SkillLevelDisplay.getColor(driver.skillLevel)}>
                    <Text size="xs" weight="medium">{SkillLevelDisplay.getLabel(driver.skillLevel)}</Text>
                  </Box>
                </Box>
              </Box>

              <Box display="flex" alignItems="center" gap={6}>
                <Box textAlign="right">
                  <Text color="text-primary-blue" font="mono" weight="bold" block size="sm">{RatingDisplay.format(driver.rating)}</Text>
                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Rating</Text>
                </Box>
                <Box textAlign="right" minWidth="12">
                  <Text color="text-performance-green" font="mono" weight="bold" block size="sm">{driver.wins}</Text>
                  <Text fontSize="10px" color="text-gray-500" block uppercase letterSpacing="wider" weight="bold">Wins</Text>
                </Box>
              </Box>
            </Box>
          );
        })}
      </Stack>
    </LeaderboardTableShell>
  );
}