import React from 'react';
import { getMediaUrl } from '@/lib/utilities/media';
import { TeamLeaderboardItem } from '@/ui/TeamLeaderboardItem';
import { TeamLeaderboardPreview as UiTeamLeaderboardPreview } from '@/ui/TeamLeaderboardPreview';

interface TeamLeaderboardPreviewProps {
  topTeams: Array<{
    id: string;
    name: string;
    logoUrl?: string;
    category?: string;
    memberCount: number;
    totalWins: number;
    isRecruiting: boolean;
    rating?: number;
    performanceLevel: string;
  }>;
  onTeamClick: (id: string) => void;
  onViewFullLeaderboard: () => void;
}

export function TeamLeaderboardPreview({
  topTeams,
  onTeamClick,
  onViewFullLeaderboard
}: TeamLeaderboardPreviewProps) {
  const getMedalColor = (position: number) => {
    switch (position) {
      case 0: return '#facc15';
      case 1: return '#d1d5db';
      case 2: return '#d97706';
      default: return '#6b7280';
    }
  };

  const getMedalBg = (position: number) => {
    switch (position) {
      case 0: return 'rgba(250, 204, 21, 0.1)';
      case 1: return 'rgba(209, 213, 219, 0.1)';
      case 2: return 'rgba(217, 119, 6, 0.1)';
      default: return 'rgba(38, 38, 38, 0.5)';
    }
  };

  const getMedalBorder = (position: number) => {
    switch (position) {
      case 0: return 'rgba(250, 204, 21, 0.3)';
      case 1: return 'rgba(209, 213, 219, 0.3)';
      case 2: return 'rgba(217, 119, 6, 0.3)';
      default: return 'rgba(38, 38, 38, 1)';
    }
  };

  if (topTeams.length === 0) return null;

  return (
    <UiTeamLeaderboardPreview
      title="Top Teams"
      subtitle="Highest rated racing teams"
      onViewFull={onViewFullLeaderboard}
    >
      {topTeams.map((team, index) => (
        <TeamLeaderboardItem
          key={team.id}
          position={index + 1}
          name={team.name}
          logoUrl={team.logoUrl || getMediaUrl('team-logo', team.id)}
          category={team.category}
          memberCount={team.memberCount}
          totalWins={team.totalWins}
          isRecruiting={team.isRecruiting}
          rating={team.rating}
          onClick={() => onTeamClick(team.id)}
          medalColor={getMedalColor(index)}
          medalBg={getMedalBg(index)}
          medalBorder={getMedalBorder(index)}
        />
      ))}
    </UiTeamLeaderboardPreview>
  );
}