'use client';

import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import type { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
import { LeagueSchedule } from '@/components/leagues/LeagueSchedule';

interface LeagueScheduleTemplateProps {
  viewData: LeagueScheduleViewData;
}

export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps) {
  return (
    <Stack gap={6}>
      <Box>
        <Heading level={2}>Race Schedule</Heading>
        <Text size="sm" color="text-gray-400" block mt={1}>
          Upcoming and completed races for this season
        </Text>
      </Box>

      <LeagueSchedule leagueId={viewData.leagueId} />
    </Stack>
  );
}