import { ReactNode } from 'react';
import { Box, type Spacing } from './Box';

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

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

  const maxWidth = fullWidth ? '100%' : '80rem';

  return (
    <Box flexGrow={1} width="full" display="flex" justifyContent="center" minWidth="0">
      <Box width="full" maxWidth={maxWidth} paddingX={4} py={paddingMap[padding]} minWidth="0">
        {children}
      </Box>
    </Box>
  );
};