<script setup>
import { computed } from 'vue'
import { Head } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'
import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'

defineOptions({ layout: AppLayout })

const props = defineProps({
  status: {
    type: Number,
    required: true,
  },
})

const errorMessages = {
  403: {
    title: 'Forbidden',
    description: 'You do not have permission to access this page.',
  },
  404: {
    title: 'Page Not Found',
    description: 'The page you are looking for could not be found.',
  },
  500: {
    title: 'Server Error',
    description: 'Something went wrong on our end. Please try again later.',
  },
  503: {
    title: 'Service Unavailable',
    description: 'We are currently performing maintenance. Please check back soon.',
  },
}

const error = computed(() => errorMessages[props.status] ?? {
  title: 'Error',
  description: 'An unexpected error occurred.',
})
</script>

<template>
  <Head :title="error.title" />

  <div class="flex items-center justify-center py-16">
    <div class="text-center max-w-md mx-auto px-4">
      <ExclamationTriangleIcon class="h-16 w-16 text-primary mx-auto mb-6" />
      <p class="text-6xl font-bold text-primary mb-4">{{ status }}</p>
      <h1 class="text-2xl font-bold text-white mb-2">{{ error.title }}</h1>
      <p class="text-gray-400 mb-8">{{ error.description }}</p>
      <AppButton size="lg" href="/">
        Back to Home
      </AppButton>
    </div>
  </div>
</template>
