import { routes } from '@/lib/routing/RouteConfig';
import { RaceListItem as UiRaceListItem } from '@/components/races/RaceListItem';
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { StatusDisplay } from '@/lib/display-objects/StatusDisplay';

interface Race {
  id: string;
  track: string;
  car: string;
  scheduledAt: string;
  status: 'scheduled' | 'running' | 'completed' | 'cancelled';
  sessionType: string;
  leagueId?: string | null;
  leagueName?: string | null;
  strengthOfField?: number | null;
}

interface RaceListItemProps {
  race: Race;
  onClick: (id: string) => void;
}

export function RaceListItem({ race, onClick }: RaceListItemProps) {
  const statusConfig = {
    scheduled: {
      iconName: 'Clock',
      variant: 'primary' as const,
    },
    running: {
      iconName: 'PlayCircle',
      variant: 'success' as const,
    },
    completed: {
      iconName: 'CheckCircle2',
      variant: 'default' as const,
    },
    cancelled: {
      iconName: 'XCircle',
      variant: 'warning' as const,
    },
  };

  const config = statusConfig[race.status];

  return (
    <UiRaceListItem
      track={race.track}
      car={race.car}
      dateLabel={DateDisplay.formatMonthDay(race.scheduledAt).split(' ')[0]}
      dayLabel={DateDisplay.formatMonthDay(race.scheduledAt).split(' ')[1]}
      timeLabel={DateDisplay.formatTime(race.scheduledAt)}
      status={race.status}
      statusLabel={StatusDisplay.raceStatus(race.status)}
      statusVariant={config.variant}
      statusIconName={config.iconName}
      leagueName={race.leagueName}
      leagueHref={race.leagueId ? routes.league.detail(race.leagueId) : undefined}
      strengthOfField={race.strengthOfField}
      onClick={() => onClick(race.id)}
    />
  );
}