import * as React from 'react'
import { cn } from '../lib/cn'

export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Max-width ceiling. Default `lg`. */
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
  /**
   * Participate in the 12-column grid. Containers never default to a centered
   * `col-span-12`; layout asymmetry is the responsibility of the consuming page.
   */
  grid?: boolean
}

const sizeMap: Record<NonNullable<ContainerProps['size']>, string> = {
  sm: 'max-w-screen-sm',
  md: 'max-w-screen-md',
  lg: 'max-w-screen-lg',
  xl: 'max-w-screen-xl',
  full: 'max-w-full',
}

export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
  ({ className, size = 'lg', grid = false, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        'mx-auto w-full px-4',
        sizeMap[size],
        grid && 'grid grid-cols-12 gap-4',
        className,
      )}
      {...props}
    />
  ),
)
Container.displayName = 'Container'