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

	interface Props {
		error: ErrorMessage | null;
		class?: ClassValue | null;
	}

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

{#if error}
	<!-- eslint-disable svelte/no-at-html-tags -->
	<div class={['bg-sui-accent text-sui-background my-4 rounded-xs px-6 py-4', classValue]}>
		{@html error.message}
	</div>
{/if}
