<script setup lang="ts"></script>

<template>
  <XScaffoldHeaderHeroMainFooter>
    <template #header>
      <header class="w-full h-full">
        <slot name="header" />
      </header>
    </template>

    <template #hero v-if="$slots.hero">
      <section class="w-full h-full">
        <slot name="hero" />
      </section>
    </template>

    <template #hero-background v-if="$slots['hero-background']">
      <div class="w-full h-full">
        <slot name="hero-background" />
      </div>
    </template>

    <template #main>
      <main class="w-full h-full" data-vaul-drawer-wrapper>
        <slot name="main" />
      </main>
    </template>

    <template #footer>
      <footer class="w-full">
        <slot name="footer" />
      </footer>
    </template>
  </XScaffoldHeaderHeroMainFooter>
</template>
