import type { ReactNode } from 'react'

type Props = {
  children: ReactNode
  maxWidth?: '2xl' | '4xl' | '5xl'
  spacing?: '6' | '8' | '10'
}

const maxWidths = { '2xl': 'max-w-2xl', '4xl': 'max-w-4xl', '5xl': 'max-w-5xl' }
const spacings = { '6': 'space-y-6', '8': 'space-y-8', '10': 'space-y-10' }

export default function PageLayout({ children, maxWidth = '2xl', spacing = '6' }: Props) {
  return (
    <div className="flex-1 p-4 md:p-8">
      <div className={`w-full ${maxWidths[maxWidth]} mx-auto ${spacings[spacing]}`}>
        {children}
      </div>
    </div>
  )
}
