<script setup lang="ts">
const refSiteFooterBottom = useTemplateRef("refSiteFooterBottom");
const { height } = useElementSize(refSiteFooterBottom);
watch(height, (h) => {
  document.documentElement.style.setProperty("--footer-bottom-height", `${h}px`);
});
</script>

<template>
  <div id="layout-default">
    <TheSiteHeaderTop />
    <TheSiteHeader />
    <div class="relative z-main bg-white border-b border-muted mb-[var(--footer-bottom-height)]">
      <UMain>
        <slot />
      </UMain>
      <TheSiteFooter />
    </div>
    <div ref="refSiteFooterBottom" class="fixed bottom-0 w-full bg-muted">
      <TheSiteFooterBottom />
    </div>
  </div>
</template>
