@props([
    'goalAmount' => 0,
    'raisedAmount' => 0,
    'size' => 'md', // sm, md, lg
    'showPercentage' => true,
    'showAmounts' => true,
    'currency' => null,
    'currencySymbol' => null
])

@php
    // Calculate percentage with safety check to avoid division by zero
    $percentage = $goalAmount > 0 ? min(100, round(($raisedAmount / $goalAmount) * 100)) : 0;
    
    // Get currency information
    $currency = $currency ?? \App\Services\CurrencyService::getUserCurrency();
    $currencySymbol = $currencySymbol ?? \App\Services\CurrencyService::getCurrencySymbol($currency);
    
    // Determine height based on size
    $height = [
        'sm' => 'h-1.5',
        'md' => 'h-2',
        'lg' => 'h-3',
    ][$size] ?? 'h-2';
    
    // Format amounts
    $formattedRaised = \App\Services\CurrencyService::formatAmount($raisedAmount, $currency);
    $formattedGoal = \App\Services\CurrencyService::formatAmount($goalAmount, $currency);
@endphp

<div {{ $attributes->merge(['class' => 'donation-progress']) }}>
    @if($showAmounts)
        <div class="flex justify-between text-sm mb-1">
            <span class="font-medium">{{ $formattedRaised }} raised</span>
            <span class="text-gray-500">of {{ $formattedGoal }}</span>
        </div>
    @endif
    
    <div class="relative w-full bg-gray-100 rounded-full {{ $height }}">
        <div 
            class="absolute top-0 left-0 h-full bg-primary rounded-full transition-all duration-1000 ease-out"
            style="width: {{ $percentage }}%"
            role="progressbar" 
            aria-valuenow="{{ $percentage }}" 
            aria-valuemin="0" 
            aria-valuemax="100"
        ></div>
    </div>
    
    @if($showPercentage)
        <div class="mt-1 text-xs text-right text-gray-500">
            {{ $percentage }}% Complete
        </div>
    @endif
</div>

@once
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Animate progress bars when they come into view
        const progressBars = document.querySelectorAll('.donation-progress .bg-primary');
        
        if ('IntersectionObserver' in window) {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        // Add a small delay for a nicer effect
                        setTimeout(() => {
                            entry.target.style.width = entry.target.style.width;
                        }, 200);
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            progressBars.forEach(bar => {
                // Start at 0 width
                const targetWidth = bar.style.width;
                bar.style.width = '0%';
                
                // Observe the element
                observer.observe(bar);
            });
        }
    });
</script>
@endonce