<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. Named in Tailwind spacing units
			// because the designs use all three of 8 / 12 / 16px.
			gap: {
				"2": "[&>*+*]:mt-1 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-1",
				"3": "[&>*+*]:mt-1.5 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-1.5",
				"4": "[&>*+*]:mt-2 [&>*+*]:border-t [&>*+*]:border-border-default [&>*+*]:pt-2"
			},
			padding: {
				default: "px-4 py-3",
				tight: "p-3"
			}
		},
		defaultVariants: {
			gap: "4",
			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 = "4", padding = "default", class: className, children }: Props = $props();

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

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