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

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

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

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