<script lang="ts">
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();

	const errorDetails = $derived(
		(data.flow?.error as { message?: string; reason?: string } | null) || null
	);
	const errorMessage = $derived(data.errorMessage || errorDetails?.message || 'An error occurred');
</script>

<svelte:head>
	<title>Error - Example App</title>
</svelte:head>

<div class="flex min-h-full flex-col justify-center px-4 py-12 sm:px-6 lg:px-8">
	<div class="mx-auto w-full max-w-md">
		<div class="alert-error">
			<div class="flex gap-3">
				<div class="flex-shrink-0">
					<svg class="h-6 w-6 text-error-400" viewBox="0 0 24 24" aria-hidden="true">
						<path
							fill="none"
							stroke="currentColor"
							stroke-width="1.5"
							stroke-linecap="round"
							stroke-linejoin="round"
							d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
						/>
					</svg>
				</div>
				<div class="flex-1 min-w-0">
					<h3 class="text-sm font-medium">Error</h3>
					<div class="mt-2 text-sm">
						<p>{errorMessage}</p>
						{#if errorDetails?.reason}
							<p class="mt-2">{errorDetails.reason}</p>
						{/if}
					</div>
					<div class="mt-4">
						<a href="/" class="btn-danger">
							Go back home
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
