<script lang="ts">
import type { components } from '$lib/generated/api';

type ActivityActorDTO = components['schemas']['ActivityActorDTO'];

interface Props {
	contributors: ActivityActorDTO[];
	hasMore: boolean;
}

let { contributors, hasMore }: Props = $props();

const safeContributors = $derived(contributors ?? []);

function safeColor(color: string): string {
	return /^#[0-9a-fA-F]{6}$/.test(color) ? color : '#8c9aa3';
}
</script>

{#if safeContributors.length === 0}
	<span
		role="img"
		aria-label="Noch niemand angefangen"
		class="inline-block h-[22px] w-[22px] flex-shrink-0 rounded-full border-[1.5px] border-dashed border-[#cdcbbf]"
	></span>
{:else}
	<span class="inline-flex items-center">
		{#each safeContributors as actor, i (actor.initials + '-' + actor.color)}
			<span
				role="img"
				aria-label={actor.name ?? actor.initials}
				class="inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full font-sans text-[10px] font-bold text-white ring-2 ring-white {i > 0 ? '-ml-1.5' : ''}"
				style="background-color: {safeColor(actor.color)};"
				title={actor.name ?? actor.initials}
			>
				{actor.initials}
			</span>
		{/each}
		{#if hasMore}
			<span
				role="img"
				aria-label="Weitere Mitwirkende"
				class="-ml-1.5 inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full bg-[#e4e2d7] font-sans text-[10px] font-bold text-ink-3 ring-2 ring-white"
			>
				…
			</span>
		{/if}
	</span>
{/if}
