@props([
    'hints' => [],
    'pick' => 'pickDescriptionHint',
])

@if (count($hints) > 0)
    <div class="mt-1.5 space-y-1" role="listbox" aria-label="{{ __('budgets.description_hints.aria') }}">
        <p class="text-[10px] font-medium text-muted-foreground">{{ __('budgets.description_hints.caption') }}</p>
        <div class="flex max-h-32 flex-wrap gap-1.5 overflow-y-auto overscroll-y-contain pr-0.5">
            @foreach ($hints as $i => $h)
                <button
                    type="button"
                    role="option"
                    wire:click="{{ $pick }}({{ $i }})"
                    class="max-w-[min(100%,18rem)] rounded-lg border border-border bg-muted/50 px-2.5 py-1.5 text-left text-[11px] font-medium leading-snug text-foreground/90 shadow-sm hover:border-primary/35 hover:bg-primary/5 ios-transition-fast ios-press-soft"
                >
                    <span class="line-clamp-2">{{ $h['value'] ?? '' }}</span>
                    @if (! empty($h['hint']))
                        <span class="mt-0.5 block text-[10px] font-normal text-muted-foreground">{{ $h['hint'] }}</span>
                    @endif
                </button>
            @endforeach
        </div>
    </div>
@endif