@props([
    'label',
    'value',
    'foot' => null,
    'trend' => null,
    'trendDirection' => 'up',
    'color' => null,
    'countTo' => null,
    'suffix' => '',
    'prefix' => '',
    'stagger' => 0,
])

<div {{ $attributes->merge(['class' => 'stat stagger-item card-hover'.($color ? ' '.$color : '')]) }} style="--stagger-index: {{ $stagger }};">
    <div class="stat-row">
        <div class="stat-label">{{ $label }}</div>
        @if ($trend)
            <div class="stat-trend {{ $trendDirection === 'down' ? 'down' : 'up' }}">{{ $trend }}</div>
        @endif
    </div>
    <div class="stat-value"
         @if ($countTo !== null) data-count-to="{{ $countTo }}" data-suffix="{{ $suffix }}" data-prefix="{{ $prefix }}" @endif>{{ $value }}</div>
    @if ($foot)
        <div class="stat-foot">{{ $foot }}</div>
    @endif
</div>
