@props(['user'])

<div class="relative group bg-[#1a1d26] rounded-xl overflow-hidden border border-gray-800 hover:border-gray-600 transition-all duration-300 hover:shadow-lg hover:shadow-black/20">
    <div class="absolute inset-0 bg-gradient-to-br from-[#1e222d] to-[#15171f]"></div>
    
    <div class="relative p-5 flex items-center gap-4">
        <div class="relative">
            <div class="w-20 h-20 rounded-full overflow-hidden border-2 {{ $user->online ? 'border-green-500' : 'border-gray-600' }} shadow-lg">
                <img style="image-rendering: pixelated;"
                     src="{{ setting('avatar_imager') }}{{ $user->look }}&direction=2&head_direction=3&gesture=sml&action=wav&size=l"
                     alt="{{ $user->username }}"
                     class="w-full h-full object-cover">
            </div>
            <div class="absolute -bottom-1 -right-1 w-5 h-5 rounded-full border-2 border-[#1a1d26] {{ $user->online ? 'bg-green-500' : 'bg-gray-500' }}"></div>
        </div>

        <div class="flex-1 min-w-0">
            <a href="{{ route('profile.show', $user->username) }}" class="block">
                <h3 class="text-lg font-bold text-white truncate hover:text-blue-400 transition-colors">
                    {{ $user->username }}
                </h3>
            </a>
            <p class="text-sm text-gray-400 truncate mt-1">
                {{ $user->motto ?: 'No motto set' }}
            </p>
            <div class="flex items-center gap-2 mt-2">
                <span class="inline-flex items-center gap-1 text-xs {{ $user->online ? 'text-green-400' : 'text-gray-500' }}">
                    <span class="w-2 h-2 rounded-full {{ $user->online ? 'bg-green-400' : 'bg-gray-500' }}"></span>
                    {{ $user->online ? 'Online' : 'Offline' }}
                </span>
            </div>
        </div>
    </div>
</div>