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

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

<template>
  <UCard class="w-1/2 mx-auto mt-10 text-center">
    <template #header>
      <div class="text-center">
        <span class="text-xl text-center font-bold">Es gab ein Problem - {{error.statusCode}}</span>
      </div>
    </template>
    <UColorModeImage
        light="/Logo.png"
        dark="/Logo_Dark.png"
        class="w-3/4 mx-auto "
    />
    <UAccordion
        class="mt-5"
        :items="[{
        label: 'Fehlerbeschreibung',
        icon: 'i-heroicons-information-circle',
        defaultOpen: false,
        content: error
      }]"
    >

    </UAccordion>
    <UButton to="/" class="mt-5">Zurück zur Startseite</UButton>

  </UCard>
</template>