<template>
  <AppPage :show-footer="showFooter">
    <header v-if="showHeader" mt-10 mb-20 min-h-45 flex items-center justify-between px-15>
      <slot v-if="$slots.header" name="header" />
      <template v-else>
        <h3>{{ title }}</h3>
        <slot name="action" />
      </template>
    </header>

    <div>
      <slot />
    </div>
  </AppPage>
</template>

<script setup>
defineProps({
  showFooter: {
    type: Boolean,
    default: false,
  },
  showHeader: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: undefined,
  },
})
const route = useRoute()
</script>
