<script lang="ts">
	import { page } from "$app/state";
	import type { SettingsNavItem } from "$lib/components/settings/SettingsNav.svelte";
	import SettingsPanel from "$lib/components/settings/SettingsPanel.svelte";
	import User from "$icon/user-round";
	import Key from "$icon/key";
	import Mail from "$icon/mail";
	import Bell from "$icon/bell";
	import Volleyball from "$icon/volleyball";
	import Spool from "$icon/spool";
	import Globe from "$icon/globe";

	let { children } = $props();

	const items: SettingsNavItem[] = [
		{ id: "profile", label: "Profile", href: "/settings", icon: User },
		{ id: "keys", label: "Keys", href: "/settings/keys", icon: Key },
		{ id: "emails", label: "Emails", href: "/settings/emails", icon: Mail },
		{ id: "notifications", label: "Notifications", href: "/settings/notifications", icon: Bell },
		{ id: "knots", label: "Knots", href: "/settings/knots", icon: Volleyball },
		{ id: "spindles", label: "Spindles", href: "/settings/spindles", icon: Spool },
		{ id: "sites", label: "Sites", href: "/settings/sites", icon: Globe }
	];

	// a drill-down keeps its parent tab active, so match on the first segment only
	const segment = $derived(page.url.pathname.replace(/^\/settings\/?/, "").split("/")[0]);
	const active = $derived(segment && items.some((i) => i.id === segment) ? segment : "profile");
</script>

<svelte:head>
	<title>Settings &middot; Tangled</title>
</svelte:head>

<!-- the panel runs edge to edge on a phone, so the page gutters and the generous
     desktop breathing room only kick in from md up -->
<div class="flex w-full flex-col items-center md:px-4 md:pt-16 md:pb-32">
	<div class="flex w-full max-w-300 flex-col">
		<SettingsPanel {items} {active}>
			{@render children()}
		</SettingsPanel>
	</div>
</div>
