<script lang="ts">
	import { Search, X } from 'lucide-svelte';
	import type { Snippet } from 'svelte';

	interface Props {
		searchValue?: string;
		searchPlaceholder?: string;
		onSearchChange?: (value: string) => void;
		onClear?: () => void;
		children?: Snippet;
	}

	let { 
		searchValue = '', 
		searchPlaceholder = 'Search...',
		onSearchChange,
		onClear,
		children 
	}: Props = $props();

	let hasFilters = $derived(searchValue !== '' || children !== undefined);
</script>

<div class="filter-bar flex flex-wrap items-center gap-3 mb-4">
	<!-- Search Input -->
	<div class="join">
		<input 
			type="text" 
			class="input input-sm join-item w-64"
			placeholder={searchPlaceholder}
			value={searchValue}
			oninput={(e) => onSearchChange?.(e.currentTarget.value)}
		/>
		<button class="btn btn-sm join-item" aria-label="Search">
			<Search size={16} />
		</button>
	</div>

	<!-- Custom Filters Slot -->
	{#if children}
		{@render children()}
	{/if}

	<!-- Clear Button -->
	{#if hasFilters}
		<button 
			class="btn btn-ghost btn-sm gap-1"
			onclick={() => {
				onSearchChange?.('');
				onClear?.();
			}}
		>
			<X size={14} />
			Clear
		</button>
	{/if}
</div>
