import type { Race } from '@gridpilot/racing/domain/entities/Race';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';

interface UpcomingRacesSidebarProps {
  races: Race[];
}

export default function UpcomingRacesSidebar({ races }: UpcomingRacesSidebarProps) {
  if (!races.length) {
    return null;
  }

  return (
    <Card className="bg-iron-gray/80">
      <div className="flex items-baseline justify-between mb-3">
        <h3 className="text-sm font-semibold text-white">Upcoming races</h3>
        <Button
          as="a"
          href="/races"
          variant="secondary"
          className="text-[11px] px-3 py-1.5"
        >
          View all
        </Button>
      </div>
      <ul className="space-y-3">
        {races.slice(0, 4).map(race => (
          <li key={race.id} className="flex items-start justify-between gap-3 text-xs">
            <div className="flex-1 min-w-0">
              <p className="text-white truncate">{race.track}</p>
              <p className="text-gray-400 truncate">{race.car}</p>
            </div>
            <div className="text-right text-gray-500 whitespace-nowrap">
              {race.scheduledAt.toLocaleDateString(undefined, {
                month: 'short',
                day: 'numeric'
              })}
            </div>
          </li>
        ))}
      </ul>
    </Card>
  );
}