'use client';

import React from 'react';
import { Panel } from '@/ui/Panel';
import { RankingListItem } from '@/components/leaderboards/RankingListItem';
import { RankingList } from '@/components/leaderboards/RankingList';
import { EmptyState } from '@/ui/EmptyState';

export interface DriverRanking {
  type: 'overall' | 'league';
  name: string;
  rank: number;
  totalDrivers: number;
  percentile: number;
  rating: number;
}

interface DriverRankingsProps {
  rankings: DriverRanking[];
}

export function DriverRankings({ rankings }: DriverRankingsProps) {
  if (!rankings || rankings.length === 0) {
    return (
      <Panel title="Rankings">
        <EmptyState
          title="No ranking data available yet"
          description="Compete in leagues to earn your first results."
          variant="minimal"
        />
      </Panel>
    );
  }

  return (
    <Panel title="Rankings">
      <RankingList>
        {rankings.map((ranking, index) => (
          <RankingListItem
            key={`${ranking.type}-${ranking.name}-${index}`}
            name={ranking.name}
            type={ranking.type}
            rank={ranking.rank}
            totalDrivers={ranking.totalDrivers}
            percentile={ranking.percentile}
            rating={ranking.rating}
          />
        ))}
      </RankingList>
    </Panel>
  );
}