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

export interface ContainerProps {
  children: ReactNode;
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
  py?: number;
  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
  zIndex?: number;
}

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

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