import { DateFormatter } from '@/lib/formatters/DateFormatter';
import { RaceStatusFormatter } from '@/lib/formatters/RaceStatusFormatter';
import { RaceCard as UiRaceCard } from './RaceCard';

interface RaceCardProps {
  race: {
    id: string;
    track: string;
    car: string;
    scheduledAt: string;
    status: string;
    leagueId?: string;
    leagueName: string;
    strengthOfField?: number | null;
  };
  onClick?: () => void;
}

export function RaceCard({ race, onClick }: RaceCardProps) {
  return (
    <UiRaceCard
      track={race.track}
      car={race.car}
      scheduledAt={race.scheduledAt}
      scheduledAtLabel={DateFormatter.formatShort(race.scheduledAt)}
      timeLabel={DateFormatter.formatTime(race.scheduledAt)}
      status={race.status}
      statusLabel={RaceStatusFormatter.getLabel(race.status)}
      statusVariant={RaceStatusFormatter.getVariant(race.status) as any}
      leagueName={race.leagueName}
      leagueId={race.leagueId}
      strengthOfField={race.strengthOfField}
      onClick={onClick}
    />
  );
}