import React from 'react';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { RankingListItem } from '@/ui/RankingListItem';
import { RankingList } from '@/ui/RankingList';
import { MinimalEmptyState } 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 (
      <Card bg="bg-iron-gray/60" borderColor="border-charcoal-outline/80" p={4}>
        <Heading level={3} mb={2}>Rankings</Heading>
        <MinimalEmptyState
          title="No ranking data available yet"
          description="Compete in leagues to earn your first results."
        />
      </Card>
    );
  }

  return (
    <Card bg="bg-iron-gray/60" borderColor="border-charcoal-outline/80" p={4}>
      <Heading level={3} mb={4}>Rankings</Heading>
      <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>
    </Card>
  );
}