<script lang="ts">
	import type { Snippet } from "svelte";
	import SettingsList from "#lib/components/settings/SettingsList.svelte";

	interface Props {
		title?: string;
		name?: string;
		id?: string;
		headingGap?: "3" | "4";
		framed?: boolean;
		children: Snippet;
	}

	let { title, name, id, headingGap = "3", framed = true, children }: Props = $props();

	const gapClass = $derived(headingGap === "4" ? "gap-md" : "gap-sm");
</script>

<section {id} class="flex w-full flex-col {gapClass}">
	{#if title}
		<h2
			data-testid="settingsSectionTitle"
			data-name={name}
			class="typography-heading-4 text-foreground-default"
		>
			{title}
		</h2>
	{/if}
	{#if framed}
		<SettingsList>
			{@render children()}
		</SettingsList>
	{:else}
		{@render children()}
	{/if}
</section>