<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 text-gray-800 px-4">
    <h1 class="text-6xl md:text-8xl font-extrabold text-red-500 mb-4">
      {{ error.statusCode }}
    </h1>
    <p class="text-xl md:text-2xl mb-6 text-center">
      {{ error.statusMessage || error.message }}
    </p>
    <NuxtLink
      to="/"
      class="px-6 py-3 bg-indigo-600 text-white rounded-lg shadow hover:bg-indigo-700 transition"
    >
      Retour à l'accueil
    </NuxtLink>
  </div>
</template>

<script setup>
defineProps({
  error: {
    type: Object,
    default: () => ({
      statusCode: 500,
      statusMessage: 'Une erreur est survenue'
    })
  }
})
</script>
