{{--
    Componente: online-friend-item
    Uso:
        <x-dashboard.online-friend-item :friend="$friend" />
    
    Espera un objeto $friend con: name, role, avatar, status (online|away|offline)
--}}

@props(['friend'])

@php
    $statusColors = [
        'online'  => 'bg-success',
        'away'    => 'bg-warning',
        'offline' => 'bg-secondary',
    ];
    $statusColor = $statusColors[$friend->status ?? 'online'] ?? 'bg-success';
@endphp

<li>
    <a class="d-flex py-2" href="{{ route('profile.show', $friend) ?? '#' }}">
        <div class="me-3 ms-2 overlay-container overlay-bottom">
            <img class="img-avatar img-avatar48"
                src="{{ $friend->avatar ?? asset('assets/media/avatars/avatar5.jpg') }}"
                alt="{{ $friend->name }}">
            <span class="overlay-item item item-tiny item-circle border border-2 border-white {{ $statusColor }}"></span>
        </div>
        <div class="flex-grow-1 fs-sm">
            <div class="fw-semibold">{{ $friend->name }}</div>
            <div class="text-muted">{{ $friend->role ?? '' }}</div>
        </div>
    </a>
</li>