@props(['user', 'size' => 'w-10 h-10', 'showStatus' => false])

<div class="relative inline-block {{ $size }} {{ $attributes->get('class') }} flex-shrink-0">
    @if($user && $user->profile_photo_path && file_exists(public_path('storage/' . $user->profile_photo_path)))
        <img src="{{ asset('storage/' . $user->profile_photo_path) }}" 
             alt="{{ $user->name ?? 'User' }}" 
             class="w-full h-full rounded-full object-cover bg-white border-2 border-white shadow-sm" 
             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
        <div class="w-full h-full rounded-full bg-blue-50 border-2 border-white shadow-sm flex items-center justify-center text-[#1e3a8a] overflow-hidden" style="display:none">
            <svg viewBox="0 0 24 24" class="w-2/3 h-2/3" fill="currentColor">
                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
        </div>
    @elseif($user && method_exists($user, 'hasRole') && $user->hasRole('Employer') && $user->employer && $user->employer->logo && file_exists(public_path('storage/' . $user->employer->logo)))
        <img src="{{ asset('storage/' . $user->employer->logo) }}" 
             alt="{{ $user->name ?? 'Employer' }}" 
             class="w-full h-full rounded-full object-contain bg-white border-2 border-white shadow-sm p-0.5" 
             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
        <div class="w-full h-full rounded-full bg-blue-50 border-2 border-white shadow-sm flex items-center justify-center text-[#1e3a8a] overflow-hidden" style="display:none">
            <svg viewBox="0 0 24 24" class="w-2/3 h-2/3" fill="currentColor">
                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
        </div>
    @else
        <div class="w-full h-full rounded-full bg-blue-50 border-2 border-white shadow-sm flex items-center justify-center text-[#1e3a8a] overflow-hidden">
            <svg viewBox="0 0 24 24" class="w-2/3 h-2/3" fill="currentColor">
                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
        </div>
    @endif
    
    @if($showStatus)
        <div class="absolute -bottom-0.5 -left-0.5 w-3 h-3 bg-green-500 border-2 border-white rounded-full shadow-sm z-10"></div>
    @endif
</div>