{{-- Profile Reaction Status Badge View --}}
<div class="profile-reaction-status-badge inline-flex items-center
    @if($size === 'sm') space-x-1 text-xs
    @elseif($size === 'lg') space-x-3 text-base
    @else space-x-2 text-sm @endif"
    wire:poll.30s="loadStatus">

    {{-- Online Status --}}
    @if($showOnlineStatus)
        <div class="flex items-center
            @if($size === 'sm') space-x-1
            @else space-x-2 @endif">

            {{-- Status Dot --}}
            <div class="
                @if($size === 'sm') w-1.5 h-1.5
                @elseif($size === 'lg') w-3 h-3
                @else w-2 h-2 @endif
                rounded-full
                @if($isOnline) bg-green-500 animate-pulse
                @else bg-gray-400 @endif">
            </div>

            {{-- Status Text (unless compact mode) --}}
            @if(!$compactMode)
                <span class="
                    @if($isOnline) text-green-600 dark:text-green-400
                    @else text-theme-muted dark:text-theme-muted @endif">
                    @if($isOnline)
                        Online
                    @elseif($lastSeen)
                        {{ $lastSeen->diffForHumans() }}
                    @else
                        Offline
                    @endif
                </span>
            @endif
        </div>
    @endif

    {{-- Reactions --}}
    @if($showReactions && count($reactions) > 0)
        <div class="flex items-center
            @if($size === 'sm') space-x-0.5
            @else space-x-1 @endif
            @if($showOnlineStatus)
                @if($size === 'sm') ml-1 pl-1
                @else ml-2 pl-2 @endif
                border-l border-theme-border dark:border-theme-secondary
            @endif">

            @foreach($reactions as $reaction)
                @if($compactMode)
                    {{-- Compact: Just show icons --}}
                    <span class="
                        @if($size === 'sm') text-xs
                        @elseif($size === 'lg') text-lg
                        @else text-sm @endif
                        {{ $reaction['color'] }}"
                        title="{{ $reaction['type'] }}">
                        {{ $reaction['icon'] }}
                    </span>
                @else
                    {{-- Full: Clickable badges --}}
                    <button wire:click="toggleReaction('{{ $reaction['type'] }}')"
                            class="inline-flex items-center
                                @if($size === 'sm') px-1.5 py-0.5 text-xs
                                @elseif($size === 'lg') px-3 py-1.5 text-sm
                                @else px-2 py-1 text-xs @endif
                                rounded-full bg-gray-100 dark:bg-theme-primary hover:bg-gray-200 dark:hover:bg-theme-secondary transition-colors"
                            title="Remove {{ $reaction['type'] }}">
                        <span class="{{ $reaction['color'] }}
                            @if($size === 'sm') text-xs
                            @elseif($size === 'lg') text-base
                            @else text-sm @endif">
                            {{ $reaction['icon'] }}
                        </span>
                        @if(!$compactMode && $size !== 'sm')
                            <span class="ml-1 text-theme-secondary dark:text-theme-muted">
                                {{ $reaction['type'] }}
                            </span>
                        @endif
                    </button>
                @endforeach
            @endif
        </div>
    @endif
</div>