@props(['activities' => [], 'title' => 'Activité Récente'])

<div {{ $attributes->merge(['class' => 'bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden']) }}>
    <div class="p-6 border-b border-gray-100">
        <h3 class="text-lg font-display font-bold text-gray-900 flex items-center gap-3">
            <span class="w-2 h-6 bg-royal-blue rounded-full"></span>
            {{ $title }}
        </h3>
    </div>
    
    <div class="divide-y divide-gray-50">
        @forelse($activities as $activity)
            <div class="p-5 hover:bg-gray-50 transition-colors">
                <div class="flex gap-4">
                    <div class="w-10 h-10 {{ $activity['icon_bg'] ?? 'bg-blue-100' }} rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="{{ $activity['icon'] ?? 'fa-solid fa-circle' }} {{ $activity['icon_color'] ?? 'text-blue-600' }} text-sm"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-semibold text-gray-900">{{ $activity['title'] }}</p>
                        <p class="text-xs text-gray-500 mt-1 truncate">{{ $activity['description'] ?? '' }}</p>
                        <p class="text-[10px] text-gray-400 mt-2 font-medium">{{ $activity['time'] }}</p>
                    </div>
                </div>
            </div>
        @empty
            <div class="p-8 text-center">
                <i class="fa-solid fa-inbox text-3xl text-gray-300 mb-3"></i>
                <p class="text-sm text-gray-500 italic">Aucune activité récente</p>
            </div>
        @endforelse
    </div>
    
    @if(count($activities) > 0)
        <div class="p-4 border-t border-gray-100 bg-gray-50/50">
            <a href="#" class="text-center block text-sm font-semibold text-royal-blue hover:text-royal-blue-dark transition-colors">
                Voir toute l'activité
            </a>
        </div>
    @endif
</div>