<script setup lang="ts">
const props = defineProps<{
  class?: string
  ux?: any
}>()

const classes = useStyling(
  'scaffoldGridLayout',
  {
    slots: {
      base: 'w-full grid grid-rows-[min-content_auto_minmax(0,1fr)_auto_min-content] grid-cols-1',
      header: 'row-1 col-span-full z-150 sticky top-0',
      footer: 'row-5 col-span-full',
    },
  },
  props
)
</script>

<template>
  <div :class="classes.base">
    <header id="scaffold-header" :class="classes.header">
      <slot name="header" />
    </header>

    <slot />

    <footer id="scaffold-footer" :class="classes.footer">
      <slot name="footer" />
    </footer>
  </div>
</template>
