<script lang="ts">
	import { BOOK_PRESETS } from '$lib/presets';
	import { getBookCollectionState } from '$lib/state/bookCollection.svelte';

	const bookCollection = getBookCollectionState();
</script>

<!--
	Built-in views, not shelves: a fixed set every library has, so nothing here is
	named, owned or persisted. The same definitions drive the home page's shelves,
	so "Recently added" means the same thing in both places.
-->
<div class="flex items-center gap-1.5 overflow-x-auto" aria-label="Preset views">
	{#each BOOK_PRESETS as preset (preset.id)}
		{@const active = bookCollection.isPresetActive(preset)}
		<button
			type="button"
			aria-pressed={active}
			onclick={() => (active ? bookCollection.clearView() : bookCollection.applyPreset(preset))}
			class="shrink-0 rounded-full border px-3 py-1 text-xs whitespace-nowrap transition-colors {active
				? 'border-primary bg-primary text-primary-foreground font-medium'
				: 'border-border text-muted-foreground hover:border-muted-foreground hover:text-foreground'}"
		>
			{preset.label}
		</button>
	{/each}
</div>
