@props(['card'])

@php
    $cardColor = \App\Support\BadgeStyle::statusColor(
        (string) ($card['label'] ?? ''),
        (string) ($card['color'] ?? 'primary')
    );
    $cardCount = (int) ($card['count'] ?? 0);
@endphp

<div class="col">
    <div class="card card-animate dashboard-kpi-card" data-dashboard-kpi-card data-kpi-key="{{ \Illuminate\Support\Str::slug((string) ($card['label'] ?? '')) }}">
        <div class="card-body">
            <div class="dashboard-kpi-card-content">
                <div class="dashboard-kpi-card-top">
                    <p class="fw-medium text-muted mb-0 dashboard-kpi-card-title">{{ __($card['label']) }}</p>
                    <div class="dashboard-kpi-card-icon">
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-{{ $cardColor }} rounded-circle">
                                <i class="{{ $card['icon'] }}"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <h2 class="ff-secondary fw-semibold dashboard-kpi-card-value">
                    <span class="counter-value" data-kpi-value data-target="{{ $cardCount }}">{{ $cardCount }}</span>
                </h2>
                <p class="mb-0 text-muted dashboard-kpi-card-subtext">
                    <span class="dashboard-kpi-subtitle">{{ __($card['description']) }}</span>
                </p>
            </div>
        </div>
    </div>
</div>