<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: 'rounded-[28px] bg-white px-6 text-[#2f2418] shadow-none',
  hero: 'overflow-hidden rounded-[34px] bg-[#10223b] px-6 text-white shadow-[0_22px_54px_rgba(16,34,59,0.24)]',
  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>
