<script lang="ts">
	import { buttonVariants } from '$lib/components/ui/button/button.svelte';
	import * as Tooltip from '$lib/components/ui/tooltip/index';
	import { Funnel } from '@lucide/svelte';

	import { useSidebar } from '$lib/components/ui/sidebar/index';
	import { getBookCollectionState } from '$lib/state/bookCollection.svelte';

	const sidebar = useSidebar('FILTER_SIDEBAR');

	const bookCollection = getBookCollectionState();
</script>

<!-- Filter button -->
<Tooltip.Provider>
	<Tooltip.Root>
		<Tooltip.Trigger
			onclick={sidebar.toggle}
			class="{buttonVariants({ variant: 'ghost', size: 'icon' })} relative"
		>
			<Funnel />
			{#if bookCollection.hasActiveFilters}
				<div class="absolute top-[5px] right-[5px] h-1.5 w-1.5 rounded-full bg-yellow-500"></div>
			{/if}
		</Tooltip.Trigger>
		<Tooltip.Content>
			<p>Filter</p>
		</Tooltip.Content>
	</Tooltip.Root>
</Tooltip.Provider>
