import { ReactNode } from 'react';
import { getResponsiveClasses, defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';

interface ContainerProps {
  children: ReactNode;
  className?: string;
  config?: Partial<LayoutConfig>;
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
  padding?: boolean;
}

export function Container({ 
  children, 
  className = '', 
  config = {},
  maxWidth = 'full',
  padding = true 
}: ContainerProps) {
  const layoutConfig = { ...defaultLayoutConfig, ...config };
  const classes = getResponsiveClasses(layoutConfig);
  
  const maxWidthClasses = {
    sm: 'max-w-sm',
    md: 'max-w-md',
    lg: 'max-w-lg',
    xl: 'max-w-xl',
    '2xl': 'max-w-2xl',
    full: 'max-w-full',
  };
  
  const paddingClass = padding ? 'px-4 sm:px-6 lg:px-8' : '';
  
  return (
    <div 
      className={`${classes.container} ${maxWidthClasses[maxWidth]} ${paddingClass} ${className}`}
      dir={layoutConfig.direction}
    >
      {children}
    </div>
  );
}