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

	interface Props {
		/** omit for the leading card, which Figma leaves unlabelled */
		title?: string;
		/** set false when the children provide their own container */
		framed?: boolean;
		children: Snippet;
	}

	let { title, framed = true, children }: Props = $props();
</script>

<section class="flex w-full flex-col gap-3">
	{#if title}
		<h2 class="typography-heading-4 text-foreground-default">{title}</h2>
	{/if}
	{#if framed}
		<SettingsList gap="sm">
			{@render children()}
		</SettingsList>
	{:else}
		{@render children()}
	{/if}
</section>
