'use client';

import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
import { useRouter } from 'next/navigation';
import { routes } from '@/lib/routing/RouteConfig';

interface RaceEvent {
  id: string;
  title: string;
  trackName: string;
  date: string;
  time: string;
  status: 'upcoming' | 'live' | 'completed';
  strengthOfField?: number;
}

interface LeagueSchedulePanelProps {
  events: RaceEvent[];
}

export function LeagueSchedulePanel({ events }: LeagueSchedulePanelProps) {
  const router = useRouter();

  const races = events.map(event => ({
    id: event.id,
    track: event.trackName,
    car: 'TBA', // Not provided in event
    leagueName: null,
    time: event.time,
    status: (event.status === 'completed' ? 'completed' : 'scheduled') as any
  }));

  return (
    <RaceScheduleTable 
      races={races} 
      onRaceClick={(id) => router.push(routes.race.detail(id))}
    />
  );
}