<script setup lang="ts">
import type { NuxtError } from "#app";

definePageMeta({
  layout: "default",
});

defineProps<{
  error: NuxtError;
}>();

useHead({
  htmlAttrs: {
    lang: "zh-CN",
  },
});

useSeoMeta({
  title: "Page not found",
  description: "We are sorry but this page could not be found.",
});

const { data: navigation } = await useAsyncData("navigation", () =>
  queryCollectionNavigation("docs"),
);
const { data: files } = useLazyAsyncData(
  "search",
  () => queryCollectionSearchSections("docs"),
  {
    server: false,
  },
);

provide("navigation", navigation);
</script>

<template>
  <UApp>
    <AppHeader />

    <UError
      :error="error"
      :clear="{
        size: 'xl',
        icon: 'lucide-arrow-left',
        class: 'rounded-full',
      }"
      redirect="/"
    />

    <AppFooter />

    <ClientOnly>
      <LazyUContentSearch :files="files" :navigation="navigation" />
    </ClientOnly>
  </UApp>
</template>
