<script setup lang="ts">
import type { ErrorTemplateData } from './types'

interface Props {
  error: ErrorTemplateData
}

defineProps<Props>()
</script>

<template>
  <div class="flex items-center justify-center gap-14">
    <slot name="icon">
      <div class="hidden lg:block max-w-[600px]">
        <img
          :src="error.icon"
          class="hidden lg:block"
          alt="error-icon"
        >
      </div>
    </slot>
    <div class="flex min-h-screen flex-col lg:min-h-0">
      <div class="flex-1 px-4 py-8 lg:p-0">
        <slot name="status">
          <p class="mb-6 text-4xl font-bold">
            {{ error.statusCode }}
          </p>
        </slot>
        <slot name="title">
          <h2 class="lg:heading-03 text-2xl font-bold ">
            {{ error.title }}
          </h2>
        </slot>
        <slot
          name="content"
          :data="error"
        />
      </div>
      <div class="sticky bottom-0 z-[10000] lg:static lg:flex">
        <slot name="default" />
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
