<script setup lang="ts">
const config = useAppConfig()
const meta = {
  title: 'Page not found',
  description:
    'The page you are looking for does not exist. It might have been removed, had its name changed, or is temporarily unavailable.',
  image: `${config.url}/images/logo.png`,
  url: config.url,
}

let slug = useRoute().params.slug

if (Array.isArray(slug)) slug = slug.join('/')

const error = {
  http_code: 200,
  title: config.title,
  url: config.url + '/' + slug,
  locale: config.locale || 'en',
  data: {
    path: '/error.vue',
    content: {
      title: 'Page not found!',
      description:
        "The page you are looking for does not exist. However, no 404 error has occurred, as you're browsing through a web application loaded into memory and HTTP error codes make no sense here.",
    },
  },
  slug: useRoute().params.slug,
  build: config.build,
  hint: 'Use the navigation bar to get back to the main page.',
}
const errorString = JSON.stringify(error, null, 2)
const buffer = ref('')

const startTime = Date.now()
const dt = 20

let i = 0

function type() {
  if (Date.now() > startTime + dt * i) buffer.value += errorString[i++]
  if (i < errorString.length) requestAnimationFrame(type)
}

onMounted(() => setTimeout(type, 1500))
</script>

<template>
  <section>
    <h3>Page not found!</h3>
    <pre class="whitespace-pre-wrap break-keep font-small">{{
        buffer
      }}<span class="blinker">&#9610;</span></pre>
  </section>
</template>

<style scoped lang="scss">
.blinker {
  animation: blinker 1s steps(2, start) infinite;
}

@keyframes blinker {
  from {
    visibility: visible;
  }

  to {
    visibility: hidden;
  }
}
</style>
