import { ReactNode } from 'react'
import { cn } from '@/lib/utils'

type ContainerWidth = 'narrow' | 'default' | 'wide' | 'full'

interface ContainerProps {
  children: ReactNode
  width?: ContainerWidth
  className?: string
}

const widthStyles: Record<ContainerWidth, string> = {
  narrow: 'max-w-2xl',
  default: 'max-w-[1200px]',
  wide: 'max-w-7xl',
  full: 'max-w-full',
}

export function Container({ children, width = 'default', className }: ContainerProps) {
  return (
    <div className={cn('mx-auto px-4 md:px-6', widthStyles[width], className)}>
      {children}
    </div>
  )
}
