import Card from '@/components/ui/Card';

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

interface DriverRankingsProps {
  rankings: DriverRanking[];
}

export default function DriverRankings({ rankings }: DriverRankingsProps) {
  if (!rankings || rankings.length === 0) {
    return (
      <Card className="bg-iron-gray/60 border-charcoal-outline/80">
        <div className="p-4">
          <h3 className="text-lg font-semibold text-white mb-2">Rankings</h3>
          <p className="text-sm text-gray-400">
            No ranking data available yet. Compete in leagues to earn your first results.
          </p>
        </div>
      </Card>
    );
  }

  return (
    <Card className="bg-iron-gray/60 border-charcoal-outline/80">
      <div className="p-4">
        <h3 className="text-lg font-semibold text-white mb-4">Rankings</h3>
        <div className="space-y-3">
          {rankings.map((ranking, index) => (
            <div
              key={`${ranking.type}-${ranking.name}-${index}`}
              className="flex items-center justify-between py-2 px-3 rounded-lg bg-deep-graphite/60"
            >
              <div className="flex flex-col">
                <span className="text-sm font-medium text-white">
                  {ranking.name}
                </span>
                <span className="text-xs text-gray-400">
                  {ranking.type === 'overall' ? 'Overall' : 'League'} ranking
                </span>
              </div>

              <div className="flex items-center gap-6 text-right text-xs">
                <div>
                  <div className="text-primary-blue text-base font-semibold">
                    #{ranking.rank}
                  </div>
                  <div className="text-gray-500">Position</div>
                </div>
                <div>
                  <div className="text-white text-sm font-semibold">
                    {ranking.totalDrivers}
                  </div>
                  <div className="text-gray-500">Drivers</div>
                </div>
                <div>
                  <div className="text-green-400 text-sm font-semibold">
                    {ranking.percentile.toFixed(1)}%
                  </div>
                  <div className="text-gray-500">Percentile</div>
                </div>
                <div>
                  <div className="text-warning-amber text-sm font-semibold">
                    {ranking.rating}
                  </div>
                  <div className="text-gray-500">Rating</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Card>
  );
}