<template>
  <section>
    <header class="tw-relative tw-flex tw-items-center tw-gap-6 tw-mt-12 tw-mb-4 first:tw-mt-0">
      <SectionTitle class="tw-mb-0">{{ title }}</SectionTitle>
      <slot name="header" />
    </header>

    <slot />
  </section>
</template>

<script lang="ts" setup>
import SectionTitle from '@/components/generic/SectionTitle.vue'

defineOptions({ compatConfig: { MODE: 3 } })
defineProps<{
  title: string
}>()
</script>