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

type RaceWithResults = {
  raceId: string;
  track: string;
  car: string;
  winnerName: string;
  scheduledAt: string | Date;
};

interface LatestResultsSidebarProps {
  results: RaceWithResults[];
}

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) => {
          const scheduledAt = typeof result.scheduledAt === 'string' ? new Date(result.scheduledAt) : result.scheduledAt;

          return (
          <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">
              {scheduledAt.toLocaleDateString(undefined, {
                month: 'short',
                day: 'numeric'
              })}
            </div>
          </li>
          );
        })}
      </ul>
    </Card>
  );
}