<script lang="ts">
	import { page } from "$app/state";
	import SettingsNav, { type SettingsNavItem } from "$lib/components/settings/SettingsNav.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>

<div class="flex w-full flex-col items-center px-4 pt-16 pb-32">
	<div
		class="flex min-h-[600px] w-full max-w-[1200px] flex-col items-stretch gap-4 overflow-hidden rounded-sm border border-border-default bg-background-default md:flex-row md:items-start"
	>
		<SettingsNav {items} {active} />

		<div class="flex min-w-0 flex-1 flex-col gap-8 px-4 py-6">
			{@render children()}
		</div>
	</div>
</div>
