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

	interface Props {
		label: string;
		/** renders a muted "(optional)" after the label, as on the webhook secret */
		optional?: boolean;
		/** helper copy under the label; pass an array to get one line each */
		description?: string | string[];
		for?: string;
		/** top-align the control when it is taller than the label, e.g. a checkbox list */
		align?: "center" | "start";
		/** the control — Figma sizes these to 320px on the right of the row */
		children: Snippet;
	}

	let {
		label,
		optional = false,
		description,
		for: forId,
		align = "center",
		children
	}: Props = $props();

	const lines = $derived(
		description === undefined ? [] : Array.isArray(description) ? description : [description]
	);
</script>

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