<template>
  <div :class="containerClass">
    <slot />
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  size: {
    type: String,
    default: 'content', // content (1400px) | narrow (800px)
  },
  padding: {
    type: Boolean,
    default: true,
  },
})

const sizeMap: Record<string, string> = {
  content: 'max-w-7xl',
  narrow: 'max-w-3xl',
}

const containerClass = computed(() => {
  const sizeClass = sizeMap[props.size] || sizeMap.content
  const paddingClass = props.padding ? 'px-4 sm:px-6 lg:px-8' : ''
  return ['mx-auto w-full', sizeClass, paddingClass].filter(Boolean).join(' ')
})
</script>
