---
// Error page: border-top banner, centered Empty from errors.json (`pageError`).
import BaseLayout from './BaseLayout.astro'
import Empty from '@ui/Empty.astro'
import errors from '@data/errors.json'
import type { IllustrationImage } from '@shared/lib/svg'

interface Props {
  title?: string
  /** key into errors.json ("404" | "500" | "maintenance" | …) */
  pageError: string
}

const { title, pageError } = Astro.props

type ErrorEntry = {
  illustration?: IllustrationImage
  title?: string | number
  header?: string
  description?: string
}

const error = (errors as Record<string, ErrorEntry>)[pageError] ?? {}
const header = error.header ?? 'Oops… You just found an error page'
---

<BaseLayout title={title} bodyClass="border-top-wide border-primary">
  <!-- BEGIN PAGE BODY -->
  <main class="page page-center" id="content">
    <div class="container-tight py-4">
      <Empty as="h1" icon="settings" illustration={error.illustration} iconText={error.title != null ? String(error.title) : undefined} title={header} description={error.description} buttonIcon="arrow-left" buttonText="Take me home" />
    </div>
  </main>
  <!-- END PAGE BODY -->
</BaseLayout>