<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";

	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>

<!-- Below md the panel is only as wide as the phone, so the sidebar collapses into
     a native picker rather than seven rows that push the page content off-screen.
     The hairline under it stands in for the sidebar's edge. -->
<div class="flex w-full flex-col gap-4 md:hidden">
	<!-- the active tab lives in the url, so navigation is what updates it: no two way binding -->
	<Select {options} value={active} onSelect={jump} {label} icon={ActiveGlyph} />
	<hr class="w-full border-0 border-t border-border-default" />
</div>

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