@props([
    'campaigns' => collect(),
    'title'     => 'Campaign Activity',
])

<div class="bg-white/80 backdrop-blur-sm rounded-xl p-6 shadow-lg border border-gray-100"
     x-data="{ visible: false }"
     x-init="setTimeout(() => visible = true, 100)">

    <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-semibold text-gray-800">
            <i class="fas fa-bullhorn text-rose-500 mr-2"></i>{{ $title }}
        </h3>
        @if($campaigns->isNotEmpty())
            <span class="text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded-full">
                {{ $campaigns->count() }} campaign{{ $campaigns->count() !== 1 ? 's' : '' }}
            </span>
        @endif
    </div>

    <div class="space-y-3">
        @forelse($campaigns as $index => $campaign)
        <div class="flex items-center justify-between p-3 bg-gray-50 hover:bg-rose-50 rounded-lg
                    border-l-4 border-rose-400 transition-colors duration-200"
             x-show="visible"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 -translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             style="transition-delay: {{ $index * 80 }}ms">
            <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-gray-800 truncate">{{ $campaign->title }}</p>
                <div class="flex items-center gap-2 mt-0.5">
                    <p class="text-xs text-gray-400">{{ $campaign->created_at->diffForHumans() }}</p>
                    @if($campaign->target_audience)
                        <span class="text-xs text-gray-400">· {{ Str::limit($campaign->target_audience, 25) }}</span>
                    @endif
                </div>
            </div>
            <div class="flex items-center gap-2 ml-3 flex-shrink-0">
                <span class="px-2 py-1 text-xs rounded-full font-medium
                    {{ $campaign->status === 'active' ? 'bg-green-100 text-green-700' :
                       ($campaign->status === 'paused' ? 'bg-yellow-100 text-yellow-700' :
                       ($campaign->status === 'completed' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-500')) }}">
                    {{ ucfirst($campaign->status) }}
                </span>
            </div>
        </div>
        @empty
        <div class="flex flex-col items-center justify-center py-8 text-gray-400">
            <i class="fas fa-bullhorn text-4xl mb-3 text-gray-300"></i>
            <p class="text-sm">No campaigns yet.</p>
            @can('create campaigns')
                <a href="{{ route('advocacy.campaigns.index') }}"
                   class="mt-3 text-xs text-rose-500 hover:text-rose-700 font-medium">
                    <i class="fas fa-plus mr-1"></i>Create your first campaign
                </a>
            @endcan
        </div>
        @endforelse
    </div>

    @if($campaigns->isNotEmpty())
        @can('view campaigns')
        <div class="mt-4 pt-3 border-t border-gray-100">
            <a href="{{ route('advocacy.campaigns.index') }}"
               class="text-xs text-rose-500 hover:text-rose-700 font-medium flex items-center gap-1">
                View all campaigns <i class="fas fa-arrow-right text-xs"></i>
            </a>
        </div>
        @endcan
    @endif
</div>
