<script lang="ts">
	import type { Snippet } from "svelte";
	import { cn } from "tailwind-variants";
	import SettingsNav, { type SettingsNavItem } from "#lib/components/settings/SettingsNav.svelte";

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

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

<div
	class={cn(
		"flex w-full flex-col items-stretch gap-md bg-background-default px-sm pt-sm pb-xl md:min-h-150 md:flex-row md:items-start md:overflow-hidden md:p-none",
		framed && "edge-ring ring-border-default md:rounded-md",
		className
	)}
>
	<SettingsNav {items} {active} {label} />

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