<script module lang="ts">
	import { tv, type VariantProps } from "tailwind-variants";

	export const settingsList = tv({
		base: "flex w-full flex-col rounded-sm border border-border-default",
		variants: {
			// Figma spaces rows with a gap and drops the hairline in the middle of it,
			// so the divider is split evenly across the two rows it separates rather
			// than sitting flush against one of them.
			gap: {
				md: "[&>*+*]:mt-2 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-2",
				sm: "[&>*+*]:mt-1 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-1"
			},
			padding: {
				default: "px-4 py-3",
				tight: "p-3"
			}
		},
		defaultVariants: {
			gap: "md",
			padding: "default"
		}
	});

	export type SettingsListVariants = VariantProps<typeof settingsList>;
</script>

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

	interface Props {
		gap?: SettingsListVariants["gap"];
		padding?: SettingsListVariants["padding"];
		class?: string;
		children: Snippet;
	}

	let { gap = "md", padding = "default", class: className, children }: Props = $props();

	const classes = $derived(settingsList({ gap, padding, class: className }));
</script>

<div class={classes}>
	{@render children()}
</div>
