@props([
    'position',
    'animationDelay' => '0'
])

@php
    // Position classes mapping
    $positionClasses = [
        'bottom-left' => '-bottom-10 -left-10',
        'bottom-right' => '-bottom-10 -right-10',
        'top-left' => '-top-8 -left-8',
        'top-right' => '-top-8 -right-8',
    ];
    
    $positionClass = $positionClasses[$position] ?? '';
    
    // Donor images - in a real application, these would come from a database
    $donorImages = [
        ['url' => 'https://randomuser.me/api/portraits/women/1.jpg', 'alt' => 'Donor'],
        ['url' => 'https://randomuser.me/api/portraits/men/1.jpg', 'alt' => 'Donor'],
        ['url' => 'https://randomuser.me/api/portraits/women/2.jpg', 'alt' => 'Donor'],
    ];
@endphp

<div 
    class="absolute {{ $positionClass }} bg-white rounded-lg p-4 shadow-lg border border-border/50 w-48 animate-fade-in-up" 
    style="animation-delay: {{ $animationDelay }}s"
>
    <div class="flex -space-x-2 mb-2">
        @foreach($donorImages as $image)
            <img 
                class="w-8 h-8 rounded-full border-2 border-white" 
                src="{{ $image['url'] }}" 
                alt="{{ $image['alt'] }}" 
                width="32" 
                height="32" 
                loading="lazy"
            />
        @endforeach
        <div class="w-8 h-8 rounded-full border-2 border-white bg-primary flex items-center justify-center text-xs text-white font-medium">
            +50
        </div>
    </div>
    <p class="text-sm font-medium">Recent donors supporting our cause</p>
</div>