<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 SlidersHorizontal from "$icon/sliders-horizontal";
	import UsersRound from "$icon/users-round";
	import Layers from "$icon/layers";
	import Webhook from "$icon/webhook";
	import Globe from "$icon/globe";

	let { children, data } = $props();

	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);

	const items = $derived<SettingsNavItem[]>([
		{ id: "general", label: "General", href: base, icon: SlidersHorizontal },
		{ id: "access", label: "Access", href: `${base}/access`, icon: UsersRound },
		{ id: "pipelines", label: "Pipelines", href: `${base}/pipelines`, icon: Layers },
		{ id: "hooks", label: "Hooks", href: `${base}/hooks`, icon: Webhook },
		{ id: "sites", label: "Sites", href: `${base}/sites`, icon: Globe }
	]);

	// route ids look like /[handle]/[repo]/settings/<tab>/…, and a drill-down keeps
	// its parent tab active, so only the segment right after `settings` matters
	const segment = $derived(page.route.id?.split("/")[4] ?? "");
	const active = $derived(items.some((i) => i.id === segment) ? segment : "general");
</script>

<SettingsPanel {items} {active} label="Repository settings">
	{@render children()}
</SettingsPanel>
