<script lang="ts">
	import Label from "$lib/components/ui/label/label.svelte";
	import { cn } from "$lib/utils";

	let {
		label,
		labelCls = "pl-2",
		children,
		error = "",
	}: {
		label: string;
		labelCls?: string;
		children?: any;
		error?: string;
	} = $props();
</script>

<div class="flex w-full flex-col gap-2">
	<Label class={cn(labelCls)}>{label}</Label>
	{@render children?.()}
	{#if error && error.length > 0}
		<Label class="text-sm text-red-500">{error}</Label>
	{/if}
</div>
