<script lang="ts">
	import Input from '$lib/components/Input/Input.svelte';

	let {
		feedbackFilter = $bindable({ event: null, content: null, username: null }),
		onUpdate
	}: { feedbackFilter: { [k: string]: any }; onUpdate: () => void } = $props();
</script>

<form class="flex flex-row justify-center space-x-4 mx-4 my-2">
	<Input size="sm" placeholder="Alle" bind:value={feedbackFilter.username} oninput={onUpdate}>
		{#snippet label()}
			<span>Nutzer</span>
		{/snippet}
	</Input>
	<Input size="sm" placeholder="Alle" bind:value={feedbackFilter.event} oninput={onUpdate}>
		{#snippet label()}
			<span>Event</span>
		{/snippet}
	</Input>
	<Input size="sm" placeholder="Alle" bind:value={feedbackFilter.content} oninput={onUpdate}>
		{#snippet label()}
			<span>Inhalt</span>
		{/snippet}
	</Input>
</form>
