<template>
  <div class="flex min-h-screen items-center justify-center bg-kestrel-bg font-mono text-kestrel-text">
    <div class="text-center">
      <h1 class="text-2xl font-semibold tracking-wide text-shadow-glow-md">
        [ Error ]
      </h1>
      <p class="mt-2 text-sm text-kestrel-muted">
        {{ error?.message ?? 'Something went wrong' }}
      </p>
      <button
        type="button"
        class="mt-4 rounded border border-kestrel-accent/50 bg-kestrel-accent-dim px-4 py-2 text-kestrel-accent shadow-glow-sm transition-colors hover:bg-kestrel-accent/20 hover:opacity-90"
        @click="handleClear"
      >
        &gt; Go back
      </button>
    </div>
  </div>
</template>

<script setup>
const error = useError()
function handleClear() {
  clearError()
  navigateTo('/')
}
</script>
