<script lang="ts">
import { slide } from 'svelte/transition';
import { m } from '$lib/paraglide/messages.js';
import DateInput from '$lib/shared/primitives/DateInput.svelte';

interface Props {
	fromDate?: string;
	toDate?: string;
	onapplyFilters: () => void;
}

let { fromDate = $bindable(''), toDate = $bindable(''), onapplyFilters }: Props = $props();
</script>

<div
	data-testid="conv-filter-controls"
	transition:slide
	class="mt-6 grid grid-cols-1 gap-6 border-t border-line-2 pt-6 md:grid-cols-12"
>
	<!-- From date -->
	<div class="md:col-span-3">
		<label
			for="conv-from"
			class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
		>
			{m.conv_label_from()}
		</label>
		<DateInput
			id="conv-from"
			bind:value={fromDate}
			onchange={() => onapplyFilters()}
			class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		/>
	</div>

	<!-- To date -->
	<div class="md:col-span-3">
		<label for="conv-to" class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase">
			{m.conv_label_to()}
		</label>
		<DateInput
			id="conv-to"
			bind:value={toDate}
			onchange={() => onapplyFilters()}
			class="block w-full rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-ink shadow-sm placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		/>
	</div>
</div>
