@props([
    'title' => '',
    'value' => '',
    'subtitle' => '',
    'icon' => '',
    'variant' => 'primary',
    'trend' => null,
    'trendValue' => '',
    'animationDelay' => '0s',
    'class' => ''
])

@php
    $variants = [
        'primary' => 'bg-primary',
        'success' => 'bg-success', 
        'warning' => 'bg-warning',
        'danger' => 'bg-danger',
        'info' => 'bg-info',
        'secondary' => 'bg-secondary',
        'dark' => 'bg-dark'
    ];
    
    $variantClass = $variants[$variant] ?? 'bg-primary';
@endphp

<div class="col-md-3 mb-3">
    <div class="card {{ $variantClass }} text-white fade-in {{ $class }}" 
         style="animation-delay: {{ $animationDelay }};">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-start">
                <div class="flex-grow-1">
                    <h4 class="card-title mb-2">{{ $title }}</h4>
                    <h2 class="mb-1 fw-bold">{{ $value }}</h2>
                    @if($subtitle)
                        <small class="opacity-75">{{ $subtitle }}</small>
                    @endif
                    @if($trend && $trendValue)
                        <div class="mt-2">
                            <small>
                                <i class="fas fa-arrow-{{ $trend === 'up' ? 'up' : 'down' }} me-1"></i>
                                {{ $trendValue }}
                            </small>
                        </div>
                    @endif
                </div>
                @if($icon)
                    <div class="flex-shrink-0 ms-3">
                        <i class="{{ $icon }} fa-3x opacity-75"></i>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>