import type { ReactNode } from 'react';

type ContainerWidth = 'sm' | 'md' | 'lg' | 'full';

interface PageContainerProps {
  children: ReactNode;
  /** Controls max-width. sm → max-w-2xl, md → max-w-3xl (default), lg → max-w-5xl, full → no constraint. */
  width?: ContainerWidth;
  className?: string;
}

const WIDTH_CLASSES: Record<ContainerWidth, string> = {
  sm: 'max-w-2xl',
  md: 'max-w-3xl',
  lg: 'max-w-5xl',
  full: '',
};

/**
 * Ethos page container — enforces consistent horizontal centering and
 * vertical spacing so every page opens the same way.
 *
 * Previously every page hand-rolled its own `mx-auto space-y-* max-w-*`.
 */
export function PageContainer({ children, width = 'md', className = '' }: PageContainerProps) {
  return (
    <div className={`mx-auto space-y-6 ${WIDTH_CLASSES[width]} ${className}`}>
      {children}
    </div>
  );
}