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

	interface Props {
		label: string;
		/** helper line under the label, e.g. "Confirm your identity to proceed." */
		description?: string;
		for?: string;
		/** the control — Figma sizes these to 320px on the right of the row */
		children: Snippet;
	}

	let { label, description, for: forId, children }: Props = $props();
</script>

<div class="flex min-h-8 w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
	<div class="flex min-w-0 flex-col">
		<label class="typography-paragraph-regular text-foreground-default" for={forId}>{label}</label>
		{#if description}
			<span class="typography-paragraph-regular text-foreground-muted">{description}</span>
		{/if}
	</div>
	<div class="w-full shrink-0 sm:w-80">{@render children()}</div>
</div>
