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

interface PointsBreakdownTableProps {
  positionPoints: Array<{ position: number; points: number }>;
}

export function PointsBreakdownTable({ positionPoints }: PointsBreakdownTableProps) {
  const getPositionStyle = (position: number): string => {
    if (position === 1) return 'bg-yellow-500 text-black';
    if (position === 2) return 'bg-gray-400 text-black';
    if (position === 3) return 'bg-amber-600 text-white';
    return 'bg-charcoal-outline text-white';
  };

  const getRowHighlight = (position: number): string => {
    if (position === 1) return 'bg-yellow-500/5 border-l-2 border-l-yellow-500';
    if (position === 2) return 'bg-gray-400/5 border-l-2 border-l-gray-400';
    if (position === 3) return 'bg-amber-600/5 border-l-2 border-l-amber-600';
    return 'border-l-2 border-l-transparent';
  };

  const formatPosition = (position: number): string => {
    if (position === 1) return '1st';
    if (position === 2) return '2nd';
    if (position === 3) return '3rd';
    return `${position}th`;
  };

  return (
    <Card className="overflow-hidden">
      <div className="mb-4">
        <h3 className="text-lg font-semibold text-white">Position Points</h3>
        <p className="text-sm text-gray-400 mt-1">Points awarded by finishing position</p>
      </div>
      
      <div className="overflow-x-auto -mx-6 -mb-6">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-charcoal-outline bg-deep-graphite">
              <th className="text-left py-3 px-6 font-medium text-gray-400 uppercase text-xs tracking-wider">
                Position
              </th>
              <th className="text-right py-3 px-6 font-medium text-gray-400 uppercase text-xs tracking-wider">
                Points
              </th>
            </tr>
          </thead>
          <tbody>
            {positionPoints.map(({ position, points }) => (
              <tr 
                key={position} 
                className={`border-b border-charcoal-outline/50 transition-colors hover:bg-iron-gray/30 ${getRowHighlight(position)}`}
              >
                <td className="py-3 px-6">
                  <div className="flex items-center gap-3">
                    <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold ${getPositionStyle(position)}`}>
                      {position}
                    </div>
                    <span className="text-white font-medium">{formatPosition(position)}</span>
                  </div>
                </td>
                <td className="py-3 px-6 text-right">
                  <span className="text-white font-semibold tabular-nums">{points}</span>
                  <span className="text-gray-500 ml-1">pts</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Card>
  );
}