@props(['preset', 'from', 'to', 'current' => 'all', 'options' => []])

{{-- Modern date-range filter: a preset picker (this week / month / year, last
     N days, YTD) with an inline custom range that appears only when chosen.
     Pass the Livewire property names as strings so it can bind to any table. --}}
<div {{ $attributes->merge(['class' => 'flex flex-wrap items-center gap-2']) }}>
    <div class="relative">
        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
            <x-icon name="calendar" class="h-4 w-4" />
        </span>
        <select
            wire:model.live="{{ $preset }}"
            class="block w-full rounded-xl border-slate-300 pl-9 pr-9 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
        >
            @foreach ($options as $key => $label)
                <option value="{{ $key }}">{{ $label }}</option>
            @endforeach
        </select>
    </div>

    @if ($current === 'custom')
        <div class="flex min-w-0 flex-1 items-center gap-1.5">
            <input type="date" wire:model.live="{{ $from }}" class="w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
            <span class="shrink-0 text-xs text-slate-400">{{ __('to') }}</span>
            <input type="date" wire:model.live="{{ $to }}" class="w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
        </div>
    @endif
</div>