<script lang="ts">
import mail from 'virtual:icons/lucide/mail'

import IconChatbot from '@/components/icons/IconChatbot.svelte'
import { testIds } from '@/constants'
import { getAgentAvatarUrl } from '@/modules/agents'
import type { AvatarSize } from '@/types'

export let avatar: string | undefined | null
export let size: AvatarSize = 'md'
export let isEmailType = false
export let isBot = false

let avatarUrl: string
$: avatarUrl = getAgentAvatarUrl(avatar)
</script>

<div>
	{#if !avatar && isBot}
		<div
			class={`flex-center bg-slate-300 text-white rounded-full`}
			class:w-6={size === 'sm'}
			class:h-6={size === 'sm'}
			class:text-sm={size === 'sm'}
			class:w-8={size === 'md'}
			class:h-8={size === 'md'}
			class:text-lg={size === 'md'}
			class:w-11={size === 'lg'}
			class:h-11={size === 'lg'}
			class:text-2xl={size === 'lg'}
		>
			<svelte:component this={IconChatbot} />
		</div>
	{:else}
		<img
			src={avatarUrl}
			alt="Agent avatar"
			class="rounded-full"
			data-testid={testIds.avatarAgent}
			class:w-6={size === 'sm'}
			class:h-6={size === 'sm'}
			class:w-8={size === 'md'}
			class:h-8={size === 'md'}
			class:w-11={size === 'lg'}
			class:h-11={size === 'lg'}
		/>
		{#if isEmailType}
			<div class="absolute top-3.7 left-3.7 inline-block p-0.8 rounded-full bg-slate-100 text-primary">
				<svelte:component this={mail} class="w-2.5 h-2.5 text-primary" />
			</div>
		{/if}
	{/if}
</div>
