import React from 'react';
import { getMediaUrl } from '@/lib/utilities/media';
import { TeamLeaderboardPreview as SemanticTeamLeaderboardPreview } from '@/components/leaderboards/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) {
  if (topTeams.length === 0) return null;

  return (
    <SemanticTeamLeaderboardPreview
      teams={topTeams.map((team, index) => ({
        id: team.id,
        name: team.name,
        tag: '', // Not available in this view data
        memberCount: team.memberCount,
        category: team.category,
        totalWins: team.totalWins,
        logoUrl: team.logoUrl || getMediaUrl('team-logo', team.id),
        position: index + 1
      }))}
      onTeamClick={onTeamClick}
      onNavigateToTeams={onViewFullLeaderboard}
    />
  );
}