<script lang="ts">
	import type { ItemFrequency } from '@colectivo/types';

	interface Props {
		suggestions: ItemFrequency[];
		activePrefix: string;
		onselect: (name: string) => void;
	}

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

{#if suggestions.length > 0}
	<!--
		Mobile: horizontal scroll row (no wrapping) — keeps the sticky input
		compact; users can swipe to see more chips.
		Desktop (md+): wraps to two lines as before.
	-->
	<div
		class="flex gap-1.5 overflow-x-auto px-4 pb-2 pt-1 md:flex-wrap md:overflow-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
	>
		{#each suggestions as item (item.name)}
			<button
				type="button"
				onclick={() => onselect(item.name)}
				class="shrink-0 rounded-full px-3 py-1 text-[13px] font-medium transition-colors
					{activePrefix && item.name.startsWith(activePrefix.toLowerCase().trim())
					? 'bg-slate-900 text-white dark:bg-white dark:text-slate-900'
					: 'bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700'}"
			>
				{item.name}
			</button>
		{/each}
	</div>
{/if}
