'use client';

import React from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Icon } from '@/ui/Icon';
import { Calendar } from 'lucide-react';
import type { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
import { ScheduleRaceCard } from '@/components/leagues/ScheduleRaceCard';
import { Surface } from '@/ui/Surface';

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>

      {viewData.races.length === 0 ? (
        <Card>
          <Stack align="center" py={12} gap={4}>
            <Surface variant="muted" rounded="full" padding={4} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
              <Icon icon={Calendar} size={8} color="#10b981" />
            </Surface>
            <Box style={{ textAlign: 'center' }}>
              <Text weight="semibold" size="lg" color="text-white" block mb={2}>No Races Scheduled</Text>
              <Text size="sm" color="text-gray-400">The race schedule will appear here once events are added.</Text>
            </Box>
          </Stack>
        </Card>
      ) : (
        <Stack gap={4}>
          {viewData.races.map((race) => (
            <ScheduleRaceCard key={race.id} race={race} />
          ))}
        </Stack>
      )}
    </Stack>
  );
}