<script setup>
const { t } = useI18n();
const i18nHead = useLocaleHead();

useHead({
  htmlAttrs: {
    lang: () => i18nHead.value.htmlAttrs.lang,
  },
  meta: [{ name: "viewport", content: "width=device-width, initial-scale=1" }],
  link: [{ rel: "icon", href: "/favicon.ico" }],
});

useSeoMeta({
  title: () => t("app.title"),
  description: () => t("app.description"),
  ogTitle: () => t("app.title"),
  ogDescription: () => t("app.description"),
  twitterCard: "summary_large_image",
});
</script>

<template>
  <UApp>
    <div class="flex flex-col min-h-screen">
      <LazyAppHeader hydrate-on-interaction />

      <UMain class="px-6">
        <NuxtPage />
      </UMain>

      <LazyAppFooter hydrate-on-interaction />
    </div>
  </UApp>
</template>
