<script lang="ts">
	import { page } from "$app/state";
	import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
	import User from "$icon/user";
	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 tabs: TabDef[] = [
		{ 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 }
	];

	const tabSegment = $derived(page.url.pathname.replace(/^\/settings\/?/, "").split("/")[0]);
	const active = $derived(
		["keys", "emails", "notifications", "knots", "spindles", "sites"].includes(tabSegment)
			? tabSegment
			: "profile"
	);
</script>

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

<div class="mx-auto w-full max-w-screen-lg px-4 py-12">
	<div class="px-2 py-2">
		<h1 class="text-heading-4 font-bold text-foreground-default">Settings</h1>
	</div>

	<div class="mt-4 rounded border border-border-default bg-background-default p-6">
		<div class="grid grid-cols-1 gap-6 md:grid-cols-4">
			<div class="col-span-1">
				<Tabs {tabs} {active} label="Settings" vertical />
			</div>

			<div class="col-span-1 flex flex-col gap-6 md:col-span-3">
				{@render children()}
			</div>
		</div>
	</div>
</div>
