'use client';

import Card from '../ui/Card';
import RankBadge from './RankBadge';

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

interface DriverRankingsProps {
  rankings: RankingData[];
}

export default function DriverRankings({ rankings }: DriverRankingsProps) {
  const getPercentileColor = (percentile: number) => {
    if (percentile >= 90) return 'text-green-400';
    if (percentile >= 75) return 'text-primary-blue';
    if (percentile >= 50) return 'text-warning-amber';
    return 'text-gray-400';
  };

  const getPercentileLabel = (percentile: number) => {
    if (percentile >= 90) return 'Top 10%';
    if (percentile >= 75) return 'Top 25%';
    if (percentile >= 50) return 'Top 50%';
    return `${(100 - percentile).toFixed(0)}th percentile`;
  };

  return (
    <Card>
      <h3 className="text-xl font-semibold text-white mb-6">Rankings</h3>
      
      <div className="space-y-4">
        {rankings.map((ranking, index) => (
          <div 
            key={index}
            className="p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
          >
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-3">
                <RankBadge rank={ranking.rank} size="md" />
                <div>
                  <div className="text-white font-medium">{ranking.name}</div>
                  <div className="text-sm text-gray-400">
                    {ranking.rank} of {ranking.totalDrivers} drivers
                  </div>
                </div>
              </div>
              <div className="text-right">
                <div className="text-2xl font-bold text-primary-blue">{ranking.rating}</div>
                <div className="text-xs text-gray-400">Rating</div>
              </div>
            </div>
            
            <div className="flex items-center justify-between text-sm">
              <span className="text-gray-400">Percentile</span>
              <span className={`font-medium ${getPercentileColor(ranking.percentile)}`}>
                {getPercentileLabel(ranking.percentile)}
              </span>
            </div>
          </div>
        ))}
      </div>

      {rankings.length === 0 && (
        <div className="text-center py-8 text-gray-400">
          No ranking data available yet.
        </div>
      )}
    </Card>
  );
}