<script setup lang="ts">
import { computed } from 'vue'
import { TooltipProvider } from 'reka-ui'
import { RouterView, useRoute } from 'vue-router'
import DefaultLayout from '@/layouts/default.vue'
import EmptyLayout from '@/layouts/empty.vue'
import ManagementLayout from '@/layouts/management.vue'
import { useAuthStore } from './stores/customer/auth'

const authStore = useAuthStore()
const route = useRoute()
const layout = computed(() => (route.meta.layout as string) || 'default')
</script>

<template>
  <Suspense>
    <TooltipProvider>
      <component :is="layout === 'empty' ? EmptyLayout : layout === 'management' ? ManagementLayout : DefaultLayout">
        <RouterView v-slot="{ Component }">
          <component :is="Component" />
        </RouterView>
      </component>
    </TooltipProvider>
  </Suspense>
</template>
