import Link from 'next/link';
import { timeUntil } from '@/lib/utilities/time';

interface UpcomingRaceItemProps {
  id: string;
  track: string;
  car: string;
  scheduledAt: Date;
  isMyLeague: boolean;
}

export function UpcomingRaceItem({
  id,
  track,
  car,
  scheduledAt,
  isMyLeague,
}: UpcomingRaceItemProps) {
  return (
    <Link
      href={`/races/${id}`}
      className="block p-3 rounded-lg bg-deep-graphite border border-charcoal-outline hover:border-primary-blue/30 transition-colors"
    >
      <div className="flex items-start justify-between gap-2 mb-2">
        <p className="text-white font-medium text-sm truncate">{track}</p>
        {isMyLeague && (
          <span className="flex-shrink-0 w-2 h-2 rounded-full bg-performance-green" title="Your league" />
        )}
      </div>
      <p className="text-xs text-gray-500 truncate mb-2">{car}</p>
      <div className="flex items-center justify-between text-xs">
        <span className="text-gray-400">
          {scheduledAt.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
        </span>
        <span className="text-primary-blue font-medium">{timeUntil(scheduledAt)}</span>
      </div>
    </Link>
  );
}