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

type UpcomingRace = {
  id: string;
  track: string;
  car: string;
  scheduledAt: string | Date;
};

interface UpcomingRacesSidebarProps {
  races: UpcomingRace[];
}

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

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