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

	export const settingsList = tv({
		base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default",
		variants: {
			// Figma spaces rows with a gap and drops the hairline in the middle of it,
			// so each row carries half the gap as its own padding and divide-y draws the
			// line between the two halves — that way the divider is split evenly across
			// the rows it separates rather than sitting flush against one of them. The
			// card's own vertical padding is whatever is left of 12px once a row's half
			// is counted, which is why it lives here rather than in `padding`. Named in
			// Tailwind spacing units because the designs use all three of 8 / 12 / 16px.
			gap: {
				"2": "py-2 [&>*]:py-1",
				"3": "py-1.5 [&>*]:py-1.5",
				"4": "py-1 [&>*]:py-2"
			},
			padding: {
				default: "px-4",
				tight: "px-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>
