// Container Component Specification
// Framework-agnostic container component definition

export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fluid';

export interface ContainerProps {
  size?: ContainerSize;
  fluid?: boolean;
  centered?: boolean;
  padding?: boolean;
  className?: string;
  children?: unknown;
}

export const containerSizes = {
  sm: {
    maxWidth: '640px',
    padding: '1rem',
  },
  md: {
    maxWidth: '768px',
    padding: '1.5rem',
  },
  lg: {
    maxWidth: '1024px',
    padding: '2rem',
  },
  xl: {
    maxWidth: '1280px',
    padding: '2rem',
  },
  full: {
    maxWidth: '100%',
    padding: '2rem',
  },
  fluid: {
    maxWidth: '100%',
    padding: '0',
  },
};

/**
 * Container Component Interface
 * 
 * Usage example (React):
 * ```tsx
 * <Container size="lg" padding>
 *   <Content />
 * </Container>
 * ```
 */
export interface ContainerComponent {
  props: ContainerProps;
  render(): unknown;
}

