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

	interface Props {
		/** omit for the leading card, which Figma leaves unlabelled */
		title?: string;
		/** gap between the heading and its card — 12px on the user pages, 16 on repo */
		headingGap?: "3" | "4";
		/** row spacing inside the framed card */
		rowGap?: SettingsListVariants["gap"];
		/** set false when the children provide their own container(s) */
		framed?: boolean;
		children: Snippet;
	}

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

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

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