import { ReactNode } from 'react';
import { Box } from './Box';
import { Container } from './Container';

export interface MainContentProps {
  children: ReactNode;
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | '7xl';
}

export const MainContent = ({ children, maxWidth = 'xl' }: MainContentProps) => {
  return (
    <Box as="main" flex={1} padding={6}>
      <Container size={maxWidth === '7xl' ? 'xl' : (maxWidth as any)}>
        <Box display="flex" flexDirection="col" gap={6} fullWidth>
          {children}
        </Box>
      </Container>
    </Box>
  );
};