import { ReactNode } from 'react';

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

/**
 * Container - Redesigned for "Modern Precision" theme.
 * Includes compatibility props to prevent app-wide breakage.
 */
export const Container = ({ 
  children, 
  size = 'lg',
  padding = 'md',
  py,
  position,
  zIndex,
  paddingX,
  fullWidth,
}: 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 combinedStyle: React.CSSProperties = {
    ...(py !== undefined ? { paddingTop: `${py * 0.25}rem`, paddingBottom: `${py * 0.25}rem` } : {}),
    ...(paddingX !== undefined ? { paddingLeft: `${paddingX * 0.25}rem`, paddingRight: `${paddingX * 0.25}rem` } : {}),
    ...(position ? { position } : {}),
    ...(zIndex !== undefined ? { zIndex } : {}),
    ...(fullWidth ? { width: '100%' } : {}),
  };

  return (
    <div 
      className={`mx-auto w-full ${sizeMap[size as keyof typeof sizeMap] || sizeMap.lg} ${paddingMap[padding as keyof typeof paddingMap] || paddingMap.md}`}
      style={combinedStyle}
    >
      {children}
    </div>
  );
};