<template>
  <NuxtLoadingIndicator :height="4" :duration="3000" color="#2f2418" />

  <Transition name="route-loader-fade">
    <div
      v-if="routeLoading"
      class="fixed inset-0 z-[999] flex items-center justify-center bg-[#f5efe7]/65 backdrop-blur-sm"
      aria-live="polite"
      aria-busy="true"
    >
      <div class="flex items-center gap-3 rounded-full border border-[#ded2bf] bg-white/92 px-5 py-3 shadow-[0_18px_40px_rgba(47,36,24,0.12)]">
        <span class="loading loading-spinner loading-md text-[#2f2418]" />
        <span class="text-sm font-medium text-base-content">{{ t('common.loading') }}</span>
      </div>
    </div>
  </Transition>

  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
const routeLoading = useState<boolean>('route-loading', () => false)
const { t } = useI18n()

useHead({
  htmlAttrs: {
    'data-theme': 'silk',
  },
  script: []
})
</script>

<style scoped>
.route-loader-fade-enter-active,
.route-loader-fade-leave-active {
  transition: opacity 0.16s ease;
}

.route-loader-fade-enter-from,
.route-loader-fade-leave-to {
  opacity: 0;
}
</style>
