<script>
	let { emotes } = $props();
</script>

<div class="emoticons">
	{#each emotes as emote (emote.id)}
		<span class="emote">{emote.name}</span>
	{/each}
</div>

<style>
	.emoticons {
		position: absolute;
		bottom: -1rem;
		left: 1rem;
		width: 100%;
	}
	.emote {
		font-size: 1.25rem;
		background: var(--sunrise-white);
		border: 2px solid var(--sunrise-pink);
		color: var(--sunrise-navy);
		border-radius: 50%;
		margin-left: -0.5rem;
		display: inline-block;
		width: 2rem;
		height: 2rem;
		text-align: center;
	}
</style>
