@props([
    'placeholder' => 'Cerca per nome paziente (min. 3 caratteri)...',
    'debounceMs' => 400,
])

<input
    x-data="{
        searchValue: @js($search ?? ''),
        updateSearch() {
            const value = this.searchValue.trim();
            if (value.length >= 3 || value.length === 0) {
                $wire.set('search', this.searchValue);
            }
        }
    }"
    x-model="searchValue"
    x-on:input.debounce.{{ $debounceMs }}ms="updateSearch()"
    type="text"
    {{ $attributes->merge(['class' => 'form-control float-right']) }}
    placeholder="{{ $placeholder }}"
    aria-label="Cerca per nome paziente"
/>