import Card from '@/components/ui/Card';
import type { RaceWithResultsDTO } from '@core/testing-support';

interface LatestResultsSidebarProps {
  results: RaceWithResultsDTO[];
}

export default function LatestResultsSidebar({ results }: LatestResultsSidebarProps) {
  if (!results.length) {
    return null;
  }

  return (
    <Card className="bg-iron-gray/80">
      <h3 className="text-sm font-semibold text-white mb-3">Latest results</h3>
      <ul className="space-y-3">
        {results.slice(0, 4).map(result => (
          <li key={result.raceId} className="flex items-start justify-between gap-3 text-xs">
            <div className="flex-1 min-w-0">
              <p className="text-white truncate">{result.track}</p>
              <p className="text-gray-400 truncate">
                {result.winnerName} • {result.car}
              </p>
            </div>
            <div className="text-right text-gray-500 whitespace-nowrap">
              {result.scheduledAt.toLocaleDateString(undefined, {
                month: 'short',
                day: 'numeric'
              })}
            </div>
          </li>
        ))}
      </ul>
    </Card>
  );
}