<script lang="ts">
	import type { Snippet } from 'svelte';

	interface Props {
		status: number;
		title: string;
		hint?: string;
		/** Optional detail block (e.g. raw error message in a <details>). */
		details?: Snippet;
		/** Primary + secondary call-to-action snippets. */
		actions?: Snippet;
		/** When true, render the chrome (AmbientBackground, card surface). For
		 * boards/admin nested errors we want to inherit the parent layout. */
		standalone?: boolean;
	}

	let { status, title, hint, details, actions, standalone = false }: Props = $props();
</script>

{#if standalone}
	<main
		class="relative z-10 flex min-h-screen items-center justify-center bg-background/80 p-4 text-foreground"
	>
		<div
			class="w-full max-w-lg rounded-xl border border-border bg-card/90 p-8 text-center shadow-[var(--shadow-lift)] backdrop-blur-sm"
		>
			<div class="mb-2 text-xs uppercase tracking-widest text-muted-foreground">
				{status}
			</div>
			<h1 class="mb-2 text-2xl font-semibold">{title}</h1>
			{#if hint}
				<p class="mb-6 text-sm text-muted-foreground">{hint}</p>
			{/if}
			{#if details}
				<div class="mb-6 text-left">{@render details()}</div>
			{/if}
			{#if actions}
				<div class="flex flex-wrap justify-center gap-2">{@render actions()}</div>
			{/if}
		</div>
	</main>
{:else}
	<main
		class="mx-auto flex min-h-[60vh] max-w-lg flex-col items-center justify-center px-4 py-16 text-center"
	>
		<div class="mb-2 text-xs uppercase tracking-widest text-muted-foreground">
			{status}
		</div>
		<h1 class="mb-2 text-2xl font-semibold">{title}</h1>
		{#if hint}
			<p class="mb-6 text-sm text-muted-foreground">{hint}</p>
		{/if}
		{#if details}
			<div class="mb-6 w-full text-left">{@render details()}</div>
		{/if}
		{#if actions}
			<div class="flex flex-wrap justify-center gap-2">{@render actions()}</div>
		{/if}
	</main>
{/if}
