@props([
    'title' => '',
    'value' => '0',
    'icon' => 'fas fa-chart-bar',
    'color' => 'primary', // primary (#0F766E), secondary (#14B8A6), success (#10b981), warning (#f59e0b), danger (#ef4444), info (#3b82f6)
    'description' => null,
])

@php
    $colorMap = [
        'primary' => '#0F766E',
        'secondary' => '#14B8A6',
        'success' => '#10b981',
        'warning' => '#f59e0b',
        'danger' => '#ef4444',
        'info' => '#3b82f6',
    ];
    $hex = $colorMap[$color] ?? '#0F766E';
@endphp

<div class="card h-100 border-0 shadow-sm float-card" style="border-radius: 12px; border-top: 4px solid {{ $hex }} !important;">
    <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <small class="text-muted text-uppercase font-weight-bold" style="font-size: 0.75rem; letter-spacing: 0.05em;">
                    {{ $title }}
                </small>
                <h3 class="font-weight-bold mb-1 mt-2 text-dark" style="font-size: 1.8rem;">
                    {{ $value }}
                </h3>
                @if ($description)
                    <p class="text-muted mb-0 mt-1" style="font-size: 0.85rem;">{{ $description }}</p>
                @endif
            </div>
            <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                 style="background: {{ $hex }}15; color: {{ $hex }}; width: 52px; height: 52px;">
                <i class="{{ $icon }}" style="font-size: 22px;"></i>
            </div>
        </div>
    </div>
</div>