import { cn } from '../../utils/cn'

const widths = {
  default: 'max-w-content',
  narrow: 'max-w-editorial',
  prose: 'max-w-prose',
  full: 'max-w-none',
}

export function Container({ as = 'div', width = 'default', className, children, ...props }) {
  const Tag = as
  return (
    <Tag
      className={cn(
        'mx-auto w-full px-gutter sm:px-gutter-md lg:px-gutter-lg',
        widths[width],
        className,
      )}
      {...props}
    >
      {children}
    </Tag>
  )
}