<script lang="ts">
	import type { Snippet } from "svelte";
	import SettingsNav, { type SettingsNavItem } from "./SettingsNav.svelte";

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

	let { items, active, label, children }: Props = $props();
</script>

<!-- Two shapes for one screen: a bordered card with the nav down its left edge on
     desktop, and below md a full-bleed panel that only keeps its top and bottom
     hairlines, since the phone frame already supplies the side margins. -->
<div
	class="flex w-full flex-col items-stretch gap-4 border-y border-border-default bg-background-default px-3 pt-3 pb-6 md:min-h-150 md:flex-row md:items-start md:overflow-hidden md:rounded-sm md:border md:p-0"
>
	<SettingsNav {items} {active} {label} />

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