import React from 'react';
import { LucideIcon } from 'lucide-react';
import { raceStatusConfig } from '@/lib/utilities/raceStatus';
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) {
  const config = raceStatusConfig[race.status as keyof typeof raceStatusConfig] || {
    border: 'border-charcoal-outline',
    bg: 'bg-charcoal-outline',
    color: 'text-gray-400',
    icon: null,
    label: 'Scheduled',
  };

  return (
    <UiRaceCard
      track={race.track}
      car={race.car}
      scheduledAt={race.scheduledAt}
      status={race.status}
      leagueName={race.leagueName}
      leagueId={race.leagueId}
      strengthOfField={race.strengthOfField}
      onClick={onClick}
      statusConfig={{
        ...config,
        icon: config.icon as LucideIcon | null,
      }}
    />
  );
}