<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
import type { ToasterProps } from '@nuxt/ui'

const { locale } = useI18n()
const { getConfig } = useSiteConfig()

const toasterPosition = useState<ToasterProps['position']>('ui:toaster:position', () => 'bottom-center')

onMounted(async () => {
  toasterPosition.value = await getConfig('ui.toaster.position', 'bottom-center') as ToasterProps['position']
})

// Safe locale access with fallback
const uiLocale = computed(() => {
  if (!locale.value || !(locale.value in locales)) {
    return locales.en || locales.nl || Object.values(locales)[0]
  }
  return locales[locale.value as keyof typeof locales]
})
</script>

<template>
  <UApp
    :locale="uiLocale"
    :toaster="{ position: toasterPosition }"
  >
    <NuxtLoadingIndicator />
    <NuxtPage />
  </UApp>
</template>
