<script lang="ts">
	import type { Snippet } from "svelte";
	import { resolve } from "$app/paths";
	import ArrowLeft from "$icon/arrow-left";

	interface Props {
		/** label of the tab being returned to, e.g. "Keys" */
		backLabel: string;
		backHref: string;
		title: string;
		/** pass an array to get one line each */
		description?: string | string[];
		children: Snippet;
	}

	let { backLabel, backHref, title, description, children }: Props = $props();

	const lines = $derived(
		description === undefined ? [] : Array.isArray(description) ? description : [description]
	);
</script>

<!-- Drill-downs are in-place content swaps: the sidebar stays put and the parent
     tab stays active, so the only wayfinding is this back link above the title. -->
<div class="flex items-center gap-2">
	<a
		href={resolve(backHref as "/")}
		class="inline-flex items-center gap-1.5 typography-paragraph-regular text-foreground-link-default no-underline hover:text-foreground-link-hover hover:no-underline"
	>
		<ArrowLeft class="size-3.5 shrink-0" aria-hidden="true" />
		{backLabel}
	</a>
</div>

<div class="flex w-full flex-col gap-4">
	<div class="flex flex-col gap-1">
		<h1 class="typography-paragraph-large text-foreground-default">{title}</h1>
		{#each lines as line (line)}
			<p class="typography-paragraph-regular text-foreground-muted">{line}</p>
		{/each}
	</div>
	{@render children()}
</div>
