@props([
    'title' => '',
    'value' => '',
    'subtitle' => '',
    'icon' => '',
    'color' => 'primary',
    'trend' => null,
    'trendValue' => null,
    'size' => 'default'
])

@php
    $colorClasses = [
        'primary' => 'bg-gradient-primary text-white',
        'success' => 'bg-gradient-success text-white',
        'info' => 'bg-gradient-info text-white',
        'warning' => 'bg-gradient-warning text-white',
        'light' => 'bg-light text-dark',
        'white' => 'bg-white text-dark border'
    ];
    
    $sizeClasses = [
        'sm' => 'p-3',
        'default' => 'p-4',
        'lg' => 'p-5'
    ];
    
    $cardClass = $colorClasses[$color] ?? $colorClasses['white'];
    $paddingClass = $sizeClasses[$size] ?? $sizeClasses['default'];
@endphp

<div {{ $attributes->merge(['class' => "stats-card rounded-4 shadow-sm border-0 {$cardClass} {$paddingClass}"]) }}>
    <div class="d-flex align-items-center justify-content-between">
        <div class="stats-content flex-grow-1">
            @if($title)
                <div class="stats-title small fw-medium opacity-75 mb-1">{{ $title }}</div>
            @endif
            
            @if($value)
                <div class="stats-value h4 fw-bold mb-0">{{ $value }}</div>
            @endif
            
            @if($subtitle)
                <div class="stats-subtitle small opacity-75 mt-1">{{ $subtitle }}</div>
            @endif
            
            @if($trend && $trendValue)
                <div class="stats-trend mt-2">
                    <span class="badge bg-white bg-opacity-20 rounded-pill">
                        <x-ui.nicon :name="$trend === 'up' ? 'trending-up' : 'trending-down'" class="me-1"/>
                        {{ $trendValue }}
                    </span>
                </div>
            @endif
        </div>
        
        @if($icon)
            <div class="stats-icon ms-3">
                <div class="icon-wrapper rounded-circle bg-white bg-opacity-20 d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                    <x-ui.nicon :name="$icon" style="font-size: 1.25rem;"/>
                </div>
            </div>
        @endif
    </div>
</div>