import React from 'react';
import { getMediaUrl } from '@/lib/utilities/media';
import { TeamLeaderboardPreview as SemanticTeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';
import type { LeaderboardTeamItem } from '@/lib/view-data/LeaderboardTeamItem';

interface TeamLeaderboardPreviewProps {
  topTeams: LeaderboardTeamItem[];
  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) => ({
        id: team.id,
        name: team.name,
        tag: team.tag,
        memberCount: team.memberCount,
        category: team.category,
        totalWins: team.totalWins,
        logoUrl: team.logoUrl || getMediaUrl('team-logo', team.id),
        position: team.position,
        rating: team.rating,
        performanceLevel: team.performanceLevel
      }))}
      onTeamClick={onTeamClick}
      onNavigateToTeams={onViewFullLeaderboard}
    />
  );
}