<script module lang="ts">
	import type { TabDef } from "#lib/components/ui/Tabs.svelte";

	export type SettingsNavItem = TabDef;
</script>

<script lang="ts">
	import { goto } from "$app/navigation";
	import { resolve } from "$app/paths";
	import Select from "#lib/components/ui/Select.svelte";
	import Tabs from "#lib/components/ui/Tabs.svelte";
	import Separator from "#lib/components/ui/Separator.svelte";

	interface Props {
		items: SettingsNavItem[];
		active: string;
		label?: string;
	}

	let { items, active, label = "Settings" }: Props = $props();

	const options = $derived(items.map((item) => ({ value: item.id, label: item.label })));
	const ActiveGlyph = $derived(items.find((i) => i.id === active)?.icon);

	const jump = (id: string) => {
		const item = items.find((i) => i.id === id);
		if (item) void goto(resolve(item.href as "/"));
	};
</script>

<div class="flex w-full flex-col gap-md md:hidden">
	<Select {options} value={active} onSelect={jump} {label} icon={ActiveGlyph} />
	<Separator />
</div>

<Tabs
	tabs={items}
	{active}
	{label}
	vertical
	class="hidden shrink-0 bg-background-navigation-frame p-xs md:flex md:w-44 md:self-stretch md:border-r md:border-border-default"
/>