<template>
	<NuxtLayout>
		<main class="flex flex-col items-center justify-center py-24 px-4 text-center min-h-[60vh]">
			<p class="text-6xl font-bold text-gray-300 mb-4">{{ error?.statusCode || 500 }}</p>
			<Heading :level="1" html-tag="h1" classes="!mt-0">
				{{ isNotFound ? "Seite nicht gefunden" : "Ein Fehler ist aufgetreten" }}
			</Heading>
			<p class="text-gray-600 max-w-md mb-8">
				{{ isNotFound
					? "Die angeforderte Seite existiert nicht oder wurde verschoben."
					: "Etwas ist schiefgelaufen. Bitte versuchen Sie es später erneut."
				}}
			</p>
			<Button data-cy="error-home-button" @click="handleBack">Zurück zum Shop</Button>
		</main>
	</NuxtLayout>
</template>

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

const props = defineProps<{
	error: NuxtError;
}>();

const isNotFound = computed(() => props.error?.statusCode === 404);

useHead({
	title: isNotFound.value ? "Seite nicht gefunden | MUELLERPRINTS" : "Fehler | MUELLERPRINTS",
});

function handleBack() {
	clearError({ redirect: "/" });
}
</script>
