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

	interface Props {
		for: string;
		error?: boolean;
		bigError?: boolean;
		class?: ClassValue | null | undefined;
		children: Snippet;
	}

	let { for: target, error, bigError, class: classValue, children }: Props = $props();
</script>

<label
	for={target}
	class={[
		'transition-fontColor block',
		error && !bigError
			? 'mt-1 text-sm font-normal text-red-500'
			: 'text-sui-text dark:text-sui-background mb-1 text-base font-medium',
		bigError && 'text-red-500!',
		classValue
	]}
>
	{@render children()}
</label>
