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

export interface ContainerProps {
  children: ReactNode;
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
}

export const Container = ({ 
  children, 
  size = 'lg' 
}: ContainerProps) => {
  const sizeMap = {
    sm: '40rem',
    md: '48rem',
    lg: '64rem',
    xl: '80rem',
    full: '100%',
  };

  return (
    <Box marginX="auto" maxWidth={sizeMap[size]} paddingX={4} fullWidth>
      {children}
    </Box>
  );
};