<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;
		description?: string;
		children: Snippet;
	}

	let { backLabel, backHref, title, description, children }: Props = $props();
</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>
		{#if description}
			<p class="typography-paragraph-regular text-foreground-muted">{description}</p>
		{/if}
	</div>
	{@render children()}
</div>
