gridpilot.gg/apps/website/ui/Container.tsx

import { ReactNode } from 'react';

export interface ContainerProps {
  children: ReactNode;
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
  padding?: 'none' | 'sm' | 'md' | 'lg';
  spacing?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
  zIndex?: number;
  /** @deprecated Use semantic props instead. */
  py?: number;
  'data-testid'?: string;
}

/**
 * Container - Redesigned for "Modern Precision" theme.
 * Enforces semantic props.
 */
export const Container = ({ 
  children, 
  size = 'lg',
  padding = 'md',
  spacing = 'none',
  position,
  zIndex,
  py,
  'data-testid': dataTestId,
}: ContainerProps) => {
  const sizeMap = {
    sm: 'max-w-[40rem]',
    md: 'max-w-[48rem]',
    lg: 'max-w-[64rem]',
    xl: 'max-w-[80rem]',
    full: 'max-w-full',
  };

  const paddingMap = {
    none: 'px-0',
    sm: 'px-2',
    md: 'px-4',
    lg: 'px-8',
  };

  const spacingMap = {
    none: 'py-0',
    sm: 'py-4',
    md: 'py-8',
    lg: 'py-12',
    xl: 'py-16',
  };

  const combinedStyle: React.CSSProperties = {
    ...(position ? { position } : {}),
    ...(zIndex !== undefined ? { zIndex } : {}),
    ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
  };

  return (
    <div
      data-testid={dataTestId}
      className={`mx-auto w-full ${sizeMap[size]} ${paddingMap[padding]} ${spacingMap[spacing]}`}
      style={combinedStyle}
    >
      {children}
    </div>
  );
};