// @design-system: layout/Container
/**
 * Container - max-width page wrapper with auto inline margins.
 *
 * @example
 * <Container maxWidth="lg" px="4">
 *   <PageHeader ... />
 * </Container>
 */

import { type ReactNode } from 'react';
import { cn } from '@/lib/cn';

type MaxWidthKey = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'full';
type SpacingKey = '0' | '2' | '3' | '4' | '5' | '6' | '8';

const maxWidthMap: Record<MaxWidthKey, string> = {
  sm: 'max-w-sm',
  md: 'max-w-md',
  lg: 'max-w-lg',
  xl: 'max-w-xl',
  '2xl': 'max-w-2xl',
  '3xl': 'max-w-5xl',
  '4xl': 'max-w-7xl',
  full: 'max-w-full',
};

const pxMap: Record<SpacingKey, string> = {
  '0': 'px-0',
  '2': 'px-2',
  '3': 'px-3',
  '4': 'px-4',
  '5': 'px-5',
  '6': 'px-6',
  '8': 'px-8',
};

export interface ContainerProps {
  children: ReactNode;
  maxWidth?: MaxWidthKey;
  px?: SpacingKey;
  className?: string;
  as?: React.ElementType;
}

export function Container({
  children,
  maxWidth = 'lg',
  px = '4',
  className,
  as: Tag = 'div',
}: ContainerProps) {
  return (
    <Tag className={cn('mx-auto w-full', maxWidthMap[maxWidth], pxMap[px], className)}>
      {children}
    </Tag>
  );
}