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

	export const settingsList = tv({
		// Figma lays these cards out as [row, separator, row] with an 8px gap, so every
		// row carries 8px of its own padding and divide-y draws the hairline between two
		// of them — the line ends up centred in the space rather than flush against the
		// row above. That leaves py-1 for the card itself, which is the rest of the 12px
		// Figma puts between the card edge and the first row.
		base: "flex w-full flex-col divide-y divide-border-default rounded-sm border border-border-default py-1 *:py-2",
		variants: {
			padding: {
				default: "px-4",
				tight: "px-3"
			}
		},
		defaultVariants: {
			padding: "default"
		}
	});

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

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

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

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

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

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