import { routes } from '@/lib/routing/RouteConfig';
import { RaceListItem as UiRaceListItem } from '@/ui/RaceListItem';
import { CheckCircle2, Clock, PlayCircle, XCircle } from 'lucide-react';

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: {
      icon: Clock,
      variant: 'primary' as const,
      label: 'Scheduled',
    },
    running: {
      icon: PlayCircle,
      variant: 'success' as const,
      label: 'LIVE',
    },
    completed: {
      icon: CheckCircle2,
      variant: 'default' as const,
      label: 'Completed',
    },
    cancelled: {
      icon: XCircle,
      variant: 'warning' as const,
      label: 'Cancelled',
    },
  };

  const config = statusConfig[race.status];

  const formatTime = (date: string) => {
    return new Date(date).toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  const date = new Date(race.scheduledAt);

  return (
    <UiRaceListItem
      track={race.track}
      car={race.car}
      dateLabel={date.toLocaleDateString('en-US', { month: 'short' })}
      dayLabel={date.getDate().toString()}
      timeLabel={formatTime(race.scheduledAt)}
      status={race.status}
      leagueName={race.leagueName}
      leagueHref={race.leagueId ? routes.league.detail(race.leagueId) : undefined}
      strengthOfField={race.strengthOfField}
      onClick={() => onClick(race.id)}
      statusConfig={config}
    />
  );
}