<script lang="ts">
	import type { ClassValue } from 'svelte/elements';
	import { ErrorMessage, type RawError } from './error';

	interface Props {
		/** Error in the form of an ErrorMessage */
		error?: ErrorMessage | null;
		/** Raw error that can be converted to an ErrorMessage */
		rawError?: RawError | null;
		/** Additional CSS classes for the error box */
		class?: ClassValue | null;
	}

	let { error, rawError, class: classValue }: Props = $props();

	let errorMessage = $derived.by(() => {
		if (error) return error;
		if (rawError) return new ErrorMessage(rawError);
	});
</script>

{#if errorMessage && errorMessage.hasError()}
	<div class={['bg-sui-accent text-sui-background my-4 rounded-xs px-6 py-4', classValue]}>
		{#each errorMessage.lines as line}
			<p>{line}</p>
		{/each}
	</div>
{/if}
