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

	interface Props {
		reaction: ReactionGroup;
	}

	let { reaction }: Props = $props();

	// keep the tooltip bounded; overflow becomes "and N more", like the go appview
	const MAX_NAMES = 10;
	const title = $derived.by(() => {
		const shown = reaction.users.slice(0, MAX_NAMES);
		const more = reaction.count - shown.length;
		const names = shown.join(", ");
		return more > 0 ? `${names}, and ${more} more` : names;
	});
</script>

<span
	{title}
	class={`flex min-h-6 items-center justify-center gap-1.5 rounded border px-2 text-sm leading-4 ${
		reaction.isReacted
			? "border-border-strong bg-background-muted text-foreground-default"
			: "border-border-default text-foreground-subtle"
	}`}
>
	<span>{reaction.kind}</span>
	<span>{reaction.count}</span>
</span>
