<script lang="ts">
	import Reaction from "./Reaction.svelte";
	import type { ReactionGroup } from "./reactions";

	interface Props {
		reactions: ReactionGroup[];
		class?: string;
	}

	let { reactions, class: className = "" }: Props = $props();
</script>

{#if reactions.length}
	<div class={`flex flex-wrap items-center gap-2 ${className}`}>
		{#each reactions as reaction (reaction.kind)}
			<Reaction {reaction} />
		{/each}
	</div>
{/if}
