'use client';

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

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: new Date(race.scheduledAt).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
    status: (race.status as 'upcoming' | 'live' | 'completed') || 'upcoming'
  }));

  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>
  );
}