<script lang="ts">
	import { page } from '$app/state';
	import { resolve } from '$app/paths';
	import { getLibraryState } from '$lib/state/library.svelte';

	let { children } = $props();

	// Set in (root)/+layout.svelte, above the settings group, so the libraries are
	// already here — this pane needs no load function of its own.
	const libraryState = getLibraryState();

	const library = $derived(
		libraryState.libraries.find((lib) => String(lib.id) === page.params.libraryId)
	);

	// The strip exists so General and a danger zone have an obvious place to land;
	// neither is built yet, and an empty tab is worse than no tab.
	//
	// Active state is matched on route id, not pathname, for the reason spelled
	// out in settings/+layout.svelte.
	const sections = [
		{ title: 'Duplicates', routeId: '/(root)/settings/libraries/[libraryId]/duplicates' },
		{ title: 'Import', routeId: '/(root)/settings/libraries/[libraryId]/import' }
	] as const;
</script>

<div class="flex flex-col gap-4">
	<div>
		<h2 class="text-lg font-semibold">{library?.name ?? 'Library'}</h2>
		<p class="text-sm text-muted-foreground">Settings for this library</p>
	</div>

	<nav class="flex gap-1 border-b">
		{#each sections as section (section.routeId)}
			<a
				href={resolve(section.routeId, { libraryId: page.params.libraryId! })}
				class="-mb-px border-b-2 px-3 py-2 text-sm font-medium transition-colors hover:text-foreground {page
					.route.id === section.routeId
					? 'border-foreground'
					: 'border-transparent text-muted-foreground'}"
			>
				{section.title}
			</a>
		{/each}
	</nav>

	{@render children()}
</div>
