'use client';

import { LeagueSchedulePanel } from '@/components/leagues/LeagueSchedulePanel';
import type { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';

import { DateDisplay } from '@/lib/display-objects/DateDisplay';

interface LeagueScheduleTemplateProps {
  viewData: LeagueScheduleViewData;
}

export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps) {
  const events = viewData.races.map(race => ({
    id: race.id,
    title: race.name || `Race ${race.id.substring(0, 4)}`,
    trackName: race.track || 'TBA',
    date: race.scheduledAt,
    time: DateDisplay.formatDateTime(race.scheduledAt),
    status: (race.status === 'completed' ? 'completed' : 'upcoming') as any,
    strengthOfField: race.strengthOfField
  }));

  return (
    <Box display="flex" flexDirection="col" gap={8}>
      <Box as="header" display="flex" flexDirection="col" gap={2}>
        <Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">Race Schedule</Text>
        <Text size="sm" color="text-zinc-500">Upcoming and past events for this season.</Text>
      </Box>

      <LeagueSchedulePanel events={events} />
    </Box>
  );
}