<script lang="ts">
	import { page } from '$app/state';
	let { error } = $props();
</script>

<div class="error-page">
	<h1>Something went wrong</h1>
	<p>{error?.message || 'An unexpected error occurred.'}</p>
	<p class="hint">Try <a href="/logout">logging out</a> and signing in again.</p>
</div>

<style>
	.error-page { max-width: 480px; margin: 4rem auto; text-align: center; padding: 2rem; }
	h1 { font-size: 1.5rem; color: #111827; margin-bottom: 0.5rem; }
	p { color: #6b7280; }
	.hint { margin-top: 1.5rem; font-size: 0.9rem; }
	a { color: #6366f1; }
</style>
