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

interface PointsTableProps {
  title?: string;
  points: { position: number; points: number }[];
}

export default function PointsTable({ title = 'Points Distribution', points }: PointsTableProps) {
  return (
    <Card>
      <h2 className="text-lg font-semibold text-white mb-4">{title}</h2>
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-charcoal-outline">
              <th className="text-left py-3 px-4 font-medium text-gray-400">Position</th>
              <th className="text-right py-3 px-4 font-medium text-gray-400">Points</th>
            </tr>
          </thead>
          <tbody>
            {points.map(({ position, points: pts }) => (
              <tr
                key={position}
                className={`border-b border-charcoal-outline/50 transition-colors hover:bg-iron-gray/30 ${
                  position <= 3 ? 'bg-iron-gray/20' : ''
                }`}
              >
                <td className="py-3 px-4">
                  <div className="flex items-center gap-3">
                    <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold ${
                      position === 1 ? 'bg-yellow-500 text-black' :
                      position === 2 ? 'bg-gray-400 text-black' :
                      position === 3 ? 'bg-amber-600 text-white' :
                      'bg-charcoal-outline text-white'
                    }`}>
                      {position}
                    </div>
                    <span className="text-white font-medium">
                      {position === 1 ? '1st' : position === 2 ? '2nd' : position === 3 ? '3rd' : `${position}th`}
                    </span>
                  </div>
                </td>
                <td className="py-3 px-4 text-right">
                  <span className="text-white font-semibold tabular-nums">{pts}</span>
                  <span className="text-gray-500 ml-1">pts</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Card>
  );
}