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

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, scheduledAt, ...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} 
      formattedDate={DateDisplay.formatShort(scheduledAt)}
      formattedTime={DateDisplay.formatTime(scheduledAt)}
      statusConfig={mappedConfig} 
    />
  );
}