<script>
	import { searchStore } from '$lib/store/search.svelte';
	import { Search } from 'lucide-svelte';
	import { slide } from 'svelte/transition';

	let showSearch = $state(false);
</script>

<div class="flex items-center gap-2">
	{#if showSearch}
		<input
			transition:slide={{ axis: 'x' }}
			bind:value={searchStore.value}
			type="text"
			placeholder="Szukaj"
			class="border-none rounded-xl bg-neutral-300"
		/>
	{/if}
	<Search class="cursor-pointer" onclick={() => (showSearch = !showSearch)} />
</div>
