<template>
  <UApp :toaster="{ position: 'top-center' }">
    <NuxtLayout />
  </UApp>
</template>

<script setup lang="ts">
const { l } = useContentInjected()
const { add } = useToast()
const shown = useCookie('cookie-toast-shown', { maxAge: 60 * 60 * 24 * 7 })

onMounted(() => {
  if (!shown.value) {
    add({
      title: l.value.cookies.title,
      description: l.value.cookies.description,
      timeout: 8000,
      color: 'primary',
      icon: 'i-heroicons-shield-check',
    })
    shown.value = true
  }
})
</script>

<style>
.page-enter-active,
.page-leave-active {
  transition: opacity 0.15s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
}
</style>
