@props([
    'position',
    'title',
    'value',
    'trend' => null,
    'trendPeriod' => null,
    'trendColor' => 'green',
    '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] ?? '';
    $trendColorClass = "text-{$trendColor}-500";
@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"
>
    <p class="text-sm font-medium text-muted-foreground">{{ $title }}</p>
    <p class="text-2xl font-bold text-primary">{{ $value }}</p>
    
    @if($trend)
        <div class="flex items-center mt-2">
            <span class="text-xs {{ $trendColorClass }} font-medium">{{ $trend }}</span>
            @if($trendPeriod)
                <span class="text-xs text-muted-foreground ml-1">{{ $trendPeriod }}</span>
            @endif
        </div>
    @endif
</div>