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

defineProps({
  error: {
    type: Object as () => NuxtError,
    default: () => ({}) as NuxtError,
  },
});
</script>

<template>
  <div
    dir="rtl"
    class="container mx-auto flex min-h-screen items-center justify-center px-4"
  >
    <div class="grid w-full md:grid-cols-2">
      <div
        class="relative z-1 hidden h-full max-h-[580px] w-full max-w-[650px] md:block"
      >
        <NuxtImg
          src="/images/error-bg.webp"
          alt="Error Image"
          class="h-full w-full object-contain"
        />
        <SvgErrorIcon class="absolute top-1/2 left-1/2 w-full -translate-1/2" />
      </div>
      <div class="z-2 flex h-full w-full flex-col items-center justify-center">
        <h1
          class="dark-text-gradient mb-[24px] flex items-center gap-2 text-center text-[60px] font-bold md:text-[80px]"
        >
          {{ $t("errorPage.error") }}
          <span> {{ error?.statusCode }}</span>
        </h1>
        <h3 class="mb-[32px] text-center text-[28px] font-bold md:text-[40px]">
          {{ error?.statusMessage }}
        </h3>
        <p
          class="text-muted-foreground mb-[32px] w-full max-w-[450px] text-center text-lg"
        >
          {{ $t("errorPage.description") }}
        </p>

        <NuxtLinkLocale
          class="ws-gradient-border w-full max-w-[400px] cursor-pointer py-4 text-center"
          to="/"
          >{{ $t("errorPage.goBack") }}
        </NuxtLinkLocale>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
