<script setup lang="ts">
import { useFuse } from '@vueuse/integrations/useFuse'

const _props = defineProps({
  error: Object,
})

const route = useRoute()
const { allLinks } = useNav()

const lastPathSegment = computed(() => {
  const segments = route.path.split('/')
  return segments[segments.length - 1] || ''
})

const { results } = useFuse(lastPathSegment, allLinks, {
  fuseOptions: { keys: ['label', 'tags'], includeScore: true, distance: 3 },
  resultLimit: 5,
})
</script>

<template>
  <Hero class="not-prose h-[32rem]">
    <HeroContent center>
      <div class="max-w-md">
        <Text is="h1" size="5xl" bold class="mb-5"> 404 </Text>
        <Text is="p" class="mb-5"> We couldn't find that page. Did you mean one of these pages? </Text>
        <Menu class="border border-base-300 rounded-xl">
          <MenuItem v-for="result in results" :key="result.item.label">
            <NuxtLink :to="result.item.to">
              {{ result.item.label }}
            </NuxtLink>
          </MenuItem>
        </Menu>
      </div>
    </HeroContent>
  </Hero>
</template>
