<script lang="ts">
export default {
  props: {
    errMessage: {
      type: Object,
      default() {
        {
          ;('Error')
        }
      }
    }
  },

  setup(props) {
    return {
      errorMessage: props.errMessage
    }
  }
}
</script>

<template>
  <div
    class="flex flex-col max-w-prose justify-center text-center mx-auto p-6 bg-ctp-crust rounded-lg text-white"
  >
    <div class="mb-6">
      <h1 class="font-bold text-5xl">oops...</h1>
      <p class="font-bold text-3xl">this wasn't supposed to happen</p>
    </div>

    <p class="text-xl">
      the server was encountered an error while retriving the data, and now we're here :3
    </p>

    <div class="mt-5">
      <p class="text-xl">please contact the administrator with this code</p>
      <p class="text-xl">error identifier: {{ errorMessage.code }}</p>
    </div>
  </div>
</template>
