<script lang="ts">
	import { Label } from 'bits-ui';
	import type { Snippet } from 'svelte';

	type Props = {
		label: string;
		for: string;
		error?: string | null;
		/** Rendered on the label line, right-aligned — for provenance or a
		 *  per-field action that would clutter the field itself. */
		hint?: Snippet;
		children: Snippet;
	};

	let { label, for: htmlFor, error = null, hint, children }: Props = $props();
</script>

<div class="flex flex-col gap-1.5">
	<div class="flex items-center justify-between gap-2">
		<Label.Root for={htmlFor} class="text-sm font-medium text-ink">{label}</Label.Root>
		{#if hint}{@render hint()}{/if}
	</div>
	{@render children()}
	{#if error}
		<p role="alert" class="text-sm text-danger">{error}</p>
	{/if}
</div>
