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

export interface ContentViewportProps {
  children: ReactNode;
  padding?: 'none' | 'sm' | 'md' | 'lg';
}

export const ContentViewport = ({ 
  children, 
  padding = 'md' 
}: ContentViewportProps) => {
  const paddingMap: Record<string, any> = {
    none: 0,
    sm: 4,
    md: 8,
    lg: 12,
  };

  return (
    <Box as="main" flex={1} overflow="auto">
      <Container size="xl">
        <Box paddingY={paddingMap[padding]}>
          {children}
        </Box>
      </Container>
    </Box>
  );
};
