

import { RaceHero as UiRaceHero } from '@/components/races/RaceHero';
import { LucideIcon } from 'lucide-react';

interface RaceHeroProps {
  track: string;
  scheduledAt: string;
  car: string;
  status: 'scheduled' | 'running' | 'completed' | 'cancelled';
  statusConfig: {
    icon: LucideIcon;
    variant: 'primary' | 'success' | 'default' | 'warning';
    label: string;
    description: string;
  };
}

export function RaceHero(props: RaceHeroProps) {
  const { statusConfig, ...rest } = props;
  
  // Map variant to match UI component expectations
  const mappedConfig: {
    icon: LucideIcon;
    variant: 'primary' | 'success' | 'default' | 'warning' | 'danger' | 'info';
    label: string;
    description: string;
  } = {
    ...statusConfig,
    variant: statusConfig.variant === 'default' ? 'default' : statusConfig.variant
  };

  return <UiRaceHero {...rest} statusConfig={mappedConfig} />;
}
