@props([
    'notifications' => [], // [['title' => '...', 'time' => '...', 'icon' => '...', 'color' => '...']]
    'count' => 0,
    'allUrl' => '#',
])

<li class="nav-item dropdown notification-center">
    <a class="nav-link" data-toggle="dropdown" href="#" aria-expanded="false">
        <i class="far fa-bell"></i>
        @if($count > 0)
            <span class="badge badge-danger navbar-badge">{{ $count > 9 ? '9+' : $count }}</span>
        @endif
    </a>
    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right shadow-lg border-0">
        <span class="dropdown-item dropdown-header font-weight-bold">{{ $count }} Notificaciones</span>
        
        @forelse($notifications as $item)
            <div class="dropdown-divider"></div>
            <a href="{{ $item['url'] ?? '#' }}" class="dropdown-item py-3">
                <div class="media align-items-center">
                    <div class="mr-3 text-{{ $item['color'] ?? 'primary' }}">
                        <i class="{{ $item['icon'] ?? 'fas fa-envelope' }} fa-fw"></i>
                    </div>
                    <div class="media-body">
                        <p class="text-sm mb-0 text-dark font-weight-600">{{ $item['title'] }}</p>
                        <p class="text-xs text-muted mb-0"><i class="far fa-clock mr-1"></i> {{ $item['time'] }}</p>
                    </div>
                </div>
            </a>
        @empty
            <div class="dropdown-divider"></div>
            <p class="dropdown-item text-center text-muted py-4 mb-0">No hay notificaciones nuevas</p>
        @endforelse
        
        <div class="dropdown-divider"></div>
        <a href="{{ $allUrl }}" class="dropdown-item dropdown-footer bg-light text-primary font-weight-bold">Ver todas las notificaciones</a>
    </div>
</li>

<style>
    .notification-center .dropdown-menu { width: 320px; border-radius: 8px; }
    .notification-center .dropdown-item:hover { background-color: #f8f9fa; }
    .notification-center .font-weight-600 { font-weight: 600; }
</style>