
{{-- Simple Online Reacted Profiles View --}}
<div class="simple-online-reacted-profiles" wire:poll.{{ $refreshInterval }}s="loadProfiles">
    <div class="mb-3">
        <h4 class="text-sm font-semibold text-theme-primary dark:text-theme-muted">
            {{ ucfirst($reactionType) }}ed Users Online
        </h4>
        <p class="text-xs text-theme-muted">
            {{ count($profiles) }} {{ Str::plural('user', count($profiles)) }}
        </p>
    </div>

    <div class="space-y-2">
        @forelse($profiles as $profile)
        <div class="flex items-center space-x-3 p-2 bg-gray-50 dark:bg-theme-secondary rounded-lg">
            {{-- Online indicator --}}
            <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>

            {{-- Avatar --}}
            @if($profile['avatar'])
            <img src="{{ $profile['avatar'] }}"
                alt="{{ $profile['name'] }}"
                class="w-8 h-8 rounded-full">
            @else
            <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-bold">
                {{ substr($profile['name'], 0, 1) }}
            </div>
            @endif

            {{-- Name and last seen --}}
            <div class="flex-1">
                <p class="text-sm font-medium text-theme-primary dark:text-white">
                    {{ $profile['name'] }}
                </p>
                <p class="text-xs text-theme-muted">
                    {{ \Carbon\Carbon::parse($profile['last_seen'])->diffForHumans() }}
                </p>
            </div>

            {{-- Reaction indicator --}}
            <span class="text-lg" title="{{ $reactionType }}">
                @if($reactionType === 'Bookmark')
                🔖
                @elseif($reactionType === 'Star')
                ⭐
                @elseif($reactionType === 'Like')
                ❤️
                @else
                👍
                @endif
            </span>
        </div>
        @empty
        <div class="text-center py-4 text-theme-muted text-sm">
            No {{ strtolower($reactionType) }}ed users online
        </div>
        @endforelse
    </div>
</div>