import React from 'react';
import { RaceStatusDisplay } from '@/lib/display-objects/RaceStatusDisplay';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
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={DateDisplay.formatShort(race.scheduledAt)}
      timeLabel={DateDisplay.formatTime(race.scheduledAt)}
      status={race.status}
      statusLabel={RaceStatusDisplay.getLabel(race.status)}
      statusVariant={RaceStatusDisplay.getVariant(race.status) as any}
      leagueName={race.leagueName}
      leagueId={race.leagueId}
      strengthOfField={race.strengthOfField}
      onClick={onClick}
    />
  );
}