{{-- ThrillWiki Reusable Component: RidesSearchSuggestions --}}
<div class="thrillwiki-component" 
     x-data="{ loading: false }"
     wire:loading.class="opacity-50">
     
    {{-- Component Header --}}
    <div class="component-header mb-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
            RidesSearchSuggestions
        </h3>
    </div>

    {{-- Component Content --}}
    <div class="component-content">
        <p class="text-gray-600 dark:text-gray-400">
            ThrillWiki component content goes here.
        </p>
        
        {{-- Example interactive element --}}
        <button wire:click="$refresh"
                class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
            Refresh Component
        </button>
    </div>

    {{-- Loading State --}}
    <div wire:loading wire:target="$refresh" 
         class="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
    </div>
</div>