<script lang="ts">
import type { ComponentType } from 'svelte'
import IconCheck from 'virtual:icons/lucide/check'
import IconClose from 'virtual:icons/lucide/x'

import IconExclamationMark from '@/components/icons/IconExclamationMark.svelte'
import IconInfo from '@/components/icons/IconInfo.svelte'
import type { FlashMessage } from '@/modules/flashMessages/types'

export let type: FlashMessage['type']

const iconComponentMap: Record<FlashMessage['type'], ComponentType> = {
	success: IconCheck as ComponentType,
	error: IconClose as ComponentType,
	warning: IconExclamationMark,
	info: IconInfo,
}

$: iconComponent = iconComponentMap[type]
</script>

<div
	class="flex-center flex-none w-6 h-6 mr-2 rounded-full"
	class:bg-green-500={type === 'success'}
	class:bg-red-500={type === 'error'}
	class:bg-orange-500={type === 'warning'}
	class:bg-slate-500={type === 'info'}
>
	<svelte:component this={iconComponent} />
</div>
