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

const props = defineProps({
  error: Object as () => NuxtError,
});
</script>

<template>
  <v-app>
    <v-main>
      <v-row
        class="fill-height"
        no-gutters
        justify="center"
        align-content="center"
      >
        <v-col cols="9">
          <v-row>
            <v-col cols="12" class="text-center text-h2">
              <span class="font-weight-bold">{{ props.error?.message }}</span>
            </v-col>
            <v-col cols="12">
              <v-row no-gutters justify="center">
                <v-btn
                  rounded="xl"
                  size="large"
                  class="text-none font-weight-bold"
                  variant="tonal"
                  :to="{ name: 'index' }"
                >
                  Go back
                </v-btn>
              </v-row>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-main>
  </v-app>
</template>
