<script setup>
const props = defineProps({
  error: {
    type: Object,
    default: () => ({})
  }
})
</script>

<template>
  <Head>
    <Title>{{ props.error.statusCode }} - BuildPath</Title>
  </Head>

  <Logo style="margin: auto; margin-top: 64px; margin-bottom: 64px" />
  <div style="margin: auto; width: fit-content; margin-top: 64px">
    <h1>{{ props.error.statusCode }} Error</h1>
    <h2>Something went wrong, sorry :(</h2>
    <div style="margin-top: 64px">
      <h3
        v-if="
          props.error.statusMessage != null &&
          props.error.statusMessage != undefined &&
          props.error.statusMessage != ''
        "
      >
        Error message: {{ props.error.statusMessage }}
      </h3>
      <h3 v-if="props.error.data != null && props.error.data != undefined">
        Error data: {{ props.error.data }}
      </h3>
      <h3 v-if="props.error.cause != null && props.error.cause != undefined">
        Error cause: {{ props.error.cause }}
      </h3>
    </div>
  </div>
</template>
