<script lang="ts">
	interface HashtagCount {
		tag: string;
		count: number;
	}

	interface Props {
		hashtags: HashtagCount[];
		selected: string | null;
		onselect: (tag: string | null) => void;
	}

	let { hashtags, selected, onselect }: Props = $props();
</script>

{#if hashtags.length > 0}
	<div class="flex gap-2 overflow-x-auto pb-2">
		<button
			onclick={() => onselect(null)}
			aria-pressed={selected === null}
			class="chip inline-flex min-h-11 shrink-0 items-center {selected === null
				? 'chip-active'
				: 'chip-inactive'}"
		>
			Alle
		</button>
		{#each hashtags as h (h.tag)}
			<button
				onclick={() => onselect(h.tag)}
				aria-pressed={selected === h.tag}
				class="chip inline-flex min-h-11 shrink-0 items-center {selected === h.tag
					? 'chip-active'
					: 'chip-inactive'}"
			>
				#{h.tag}
				<span class="ml-1 text-xs opacity-70">{h.count}</span>
			</button>
		{/each}
	</div>
{/if}
