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

import React from 'react';
import { Users, Crown, 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 { getMediaUrl } from '@/lib/utilities/media';
import { SkillLevelDisplay } from '@/lib/display-objects/SkillLevelDisplay';
import { MedalDisplay } from '@/lib/display-objects/MedalDisplay';

interface TeamLeaderboardPreviewProps {
  teams: {
    id: string;
    name: string;
    tag: string;
    memberCount: number;
    category?: string;
    totalWins: number;
    logoUrl: string;
    position: number;
  }[];
  onTeamClick: (id: string) => void;
  onNavigateToTeams: () => void;
}

export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }: TeamLeaderboardPreviewProps) {
  const top5 = teams; // Already sliced in builder when implemented

  return (
    <Box rounded="xl" bg="bg-iron-gray/30" border borderColor="border-charcoal-outline" overflow="hidden">
      <Box display="flex" alignItems="center" justifyContent="between" px={5} py={4} borderBottom borderColor="border-charcoal-outline" bg="bg-iron-gray/20">
        <Box display="flex" alignItems="center" gap={3}>
          <Box display="flex" h="10" w="10" alignItems="center" justifyContent="center" rounded="xl" bg="bg-gradient-to-br from-purple-500/20 to-purple-500/5" border borderColor="border-purple-500/20">
            <Icon icon={Users} size={5} color="text-purple-400" />
          </Box>
          <Box>
            <Heading level={3} fontSize="lg" weight="semibold" color="text-white">Team Rankings</Heading>
            <Text size="xs" color="text-gray-500" block>Top performing racing teams</Text>
          </Box>
        </Box>
        <Button
          variant="secondary"
          onClick={onNavigateToTeams}
          size="sm"
        >
          <Stack direction="row" align="center" gap={2}>
            <Text size="sm">View All</Text>
            <Icon icon={ChevronRight} size={4} />
          </Stack>
        </Button>
      </Box>

      <Stack gap={0} 
        // eslint-disable-next-line gridpilot-rules/component-classification
        className="divide-y divide-charcoal-outline/50"
      >
        {top5.map((team) => {
          const position = team.position;

          return (
            <Box
              key={team.id}
              as="button"
              type="button"
              onClick={() => onTeamClick(team.id)}
              display="flex"
              alignItems="center"
              gap={4}
              px={5}
              py={3}
              w="full"
              textAlign="left"
              transition
              hoverBg="bg-iron-gray/30"
              group
            >
              <Box 
                display="flex" 
                h="8" 
                w="8" 
                alignItems="center" 
                justifyContent="center" 
                rounded="full" 
                border 
                // eslint-disable-next-line gridpilot-rules/component-classification
                className={`text-xs font-bold ${MedalDisplay.getBg(position)} ${MedalDisplay.getColor(position)}`}
              >
                {position <= 3 ? <Icon icon={Crown} size={3.5} /> : <Text weight="bold">{position}</Text>}
              </Box>

              <Box display="flex" h="9" w="9" alignItems="center" justifyContent="center" rounded="lg" bg="bg-charcoal-outline" border borderColor="border-charcoal-outline" overflow="hidden">
                <Image
                  src={team.logoUrl || getMediaUrl('team-logo', team.id)}
                  alt={team.name}
                  width={36}
                  height={36}
                  fullWidth
                  fullHeight
                  objectFit="cover"
                />
              </Box>

              <Box flexGrow={1} minWidth="0">
                <Text weight="medium" color="text-white" truncate groupHoverTextColor="text-purple-400" transition block>
                  {team.name}
                </Text>
                <Box display="flex" alignItems="center" gap={2} flexWrap="wrap">
                  {team.category && (
                    <Box display="flex" alignItems="center" gap={1} color="text-purple-400">
                      <Box w="1.5" h="1.5" rounded="full" bg="bg-purple-400" />
                      <Text size="xs">{team.category}</Text>
                    </Box>
                  )}
                  <Box display="flex" alignItems="center" gap={1}>
                    <Icon icon={Users} size={3} color="text-gray-500" />
                    <Text size="xs" color="text-gray-500">{team.memberCount} members</Text>
                  </Box>
                  <Box as="span" 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    className={SkillLevelDisplay.getColor(team.category || '')}
                  >
                    <Text size="xs">{SkillLevelDisplay.getLabel(team.category || '')}</Text>
                  </Box>
                </Box>
              </Box>

              <Box display="flex" alignItems="center" gap={4}>
                <Box textAlign="center">
                  <Text color="text-purple-400" font="mono" weight="semibold" block>{team.memberCount}</Text>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-gray-500" 
                    block
                  >
                    Members
                  </Text>
                </Box>
                <Box textAlign="center">
                  <Text color="text-performance-green" font="mono" weight="semibold" block>{team.totalWins}</Text>
                  <Text 
                    // eslint-disable-next-line gridpilot-rules/component-classification
                    style={{ fontSize: '10px' }} 
                    color="text-gray-500" 
                    block
                  >
                    Wins
                  </Text>
                </Box>
              </Box>
            </Box>
          );
        })}
      </Stack>
    </Box>
  );
}