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

	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
		label?: string;
		subtitle?: string;
		for?: string;
		required?: boolean;
		class?: string;
		children: Snippet<[{ id: string }]>;
	}

	let {
		label,
		subtitle,
		for: forId,
		required = false,
		class: className = "",
		children,
		...rest
	}: Props = $props();

	const generatedId = $props.id();
	const id = $derived(forId ?? generatedId);
</script>

<div class={`flex flex-col gap-1.5 ${className}`} {...rest}>
	{#if label}
		<label for={id} class="text-xs font-medium tracking-wide text-foreground-muted uppercase">
			{label}
			{#if required}
				<span class="text-foreground-subtle">*</span>
			{/if}
		</label>
	{/if}
	{@render children({ id })}
	{#if subtitle}
		<p class="text-xs text-foreground-subtle">{subtitle}</p>
	{/if}
</div>
