'use client';

import { ReactNode } from 'react';
import { Box } from '@/ui/Box';
import { Container } from '@/ui/Container';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { GridItem } from '@/ui/GridItem';
import { Text } from '@/ui/Text';

interface RacesLayoutProps {
  children: ReactNode;
  header: ReactNode;
  banner?: ReactNode;
  sidebar: ReactNode;
}

export function RacesLayout({ children, header, banner, sidebar }: RacesLayoutProps) {
  return (
    <Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
      <Container size="lg">
        <Stack gap={8}>
          {header}
          {banner}
          <Grid cols={12} gap={6}>
            <GridItem colSpan={12} lgSpan={8}>
              {children}
            </GridItem>
            <GridItem colSpan={12} lgSpan={4}>
              {sidebar}
            </GridItem>
          </Grid>
        </Stack>
      </Container>
    </Box>
  );
}

export function RaceScheduleSection({ children, title }: { children: ReactNode, title: string }) {
  return (
    <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" overflow="hidden">
      <Box p={4} borderBottom borderColor="border-outline-steel" bg="bg-base-black" bgOpacity={0.2}>
        <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">{title}</Text>
      </Box>
      {children}
    </Box>
  );
}