import type { ReactNode } from 'react';

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

interface PageContainerProps {
  children: ReactNode;
  /** Controls max-width. sm → reading width (prose, forms), md → default, lg → widest grid, full → no constraint. */
  width?: ContainerWidth;
  className?: string;
}

// Measured on a 1440px viewport: the old md (768px) left ~480px of the main
// area empty and pinned every grid to 4–5 columns. These track the content,
// not an arbitrary prose measure — only `sm` stays narrow, for forms and prose.
const WIDTH_CLASSES: Record<ContainerWidth, string> = {
  sm: 'max-w-3xl',
  md: 'max-w-[1240px]',
  lg: 'max-w-[1400px]',
  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-4 ${WIDTH_CLASSES[width]} ${className}`}>
      {children}
    </div>
  );
}
