<script setup lang="ts">
import { RouterView } from 'vue-router'
import GlobalHeader from '@/components/GlobalHeader.vue'
import { storeToRefs } from 'pinia'
import { usePowerItems } from './stores/powerItems'
import { computed } from 'vue'

const { blessingPowerItems, fellowPowerItems, intimacyPowerItems } = storeToRefs(usePowerItems())

const isLoaded = computed(
  () =>
    !blessingPowerItems.value.keys().next().done &&
    !fellowPowerItems.value.keys().next().done &&
    !intimacyPowerItems.value.keys().next().done
)
</script>

<template>
  <v-app>
    <GlobalHeader />
    <v-main class="d-flex">
      <RouterView v-if="isLoaded" />
    </v-main>
    <v-footer app>
      <div>Copyright Annika Merris 2024</div>
    </v-footer>
  </v-app>
</template>

<style></style>
