<script lang="ts">
	import { createAvatar } from '@melt-ui/svelte';
 
	/** Set the image source. */
	export let src = '/corgi-avatar.jpg';
	/** Set the image alt value. */
	export let alt = 'avatar';
 
	const {
		elements: { image }
	} = createAvatar({
		src
	});
</script>
 
<span
	class="avatar-image w-16 h-16 rounded-btn border-2 border-surface-500-800 inline-flex justify-center items-center drag-none overflow-hidden"
>
	<img
		{...$image}
		use:image
		class="w-16 h-16 rounded-btn drag-none transition-all hover:scale-110"
		{alt}
	/>
</span>