<template>
  <section :class="sectionClass">
    <slot />
  </section>
</template>

<script setup lang="ts">
const props = defineProps({
  variant: {
    type: String,
    default: 'default',
  },
  paddingY: {
    type: String,
    default: 'lg',
  },
})

const variantMap: Record<string, string> = {
  default: 'bg-base-200 text-base-content',
  hero: 'bg-primary text-primary-content rounded-box overflow-hidden px-6',
  plain: '',
}

const paddingMap: Record<string, string> = {
  md: 'py-10',
  lg: 'py-12 lg:py-16',
}

const sectionClass = computed(() => {
  const variantClass = variantMap[props.variant] ?? variantMap.default
  const pyClass = paddingMap[props.paddingY] ?? paddingMap.lg
  return `${variantClass} ${pyClass}`.trim()
})
</script>
