@props([
    'label',
    'value',
    'icon' => 'bi-graph-up',
    'trend' => null,
    'trendDirection' => 'neutral',
    'variant' => 'primary',
    'counter' => null,
    'prefix' => '',
    'suffix' => '',
    'decimals' => 0,
])

@php
    $variantClass = match($variant) {
        'success' => 'bv-stat-card--success',
        'warning' => 'bv-stat-card--warning',
        'danger' => 'bv-stat-card--danger',
        'info' => 'bv-stat-card--info',
        'accent' => 'bv-stat-card--accent',
        default => '',
    };

    $trendClass = match($trendDirection) {
        'up' => 'bv-stat-card__trend--up',
        'down' => 'bv-stat-card__trend--down',
        default => 'bv-stat-card__trend--neutral',
    };

    $trendIcon = match($trendDirection) {
        'up' => 'bi-arrow-up-short',
        'down' => 'bi-arrow-down-short',
        default => 'bi-dash',
    };
@endphp

<div {{ $attributes->merge(['class' => 'bv-stat-card ' . $variantClass]) }}>
    <div class="bv-stat-card__header">
        <div class="bv-stat-card__icon" aria-hidden="true">
            <i class="bi {{ $icon }}"></i>
        </div>
        @isset($action)
            <div>{{ $action }}</div>
        @endisset
    </div>

    @if(!is_null($counter))
        <div class="bv-stat-card__value">
            <span data-bv-counter="{{ $counter }}"
                  data-prefix="{{ $prefix }}"
                  data-suffix="{{ $suffix }}"
                  data-decimals="{{ $decimals }}">{{ $prefix }}0{{ $suffix }}</span>
        </div>
    @else
        <div class="bv-stat-card__value">{{ $value }}</div>
    @endif

    <div class="bv-stat-card__label">{{ $label }}</div>

    @if($trend)
        <div class="bv-stat-card__trend {{ $trendClass }}">
            <i class="bi {{ $trendIcon }}" aria-hidden="true"></i>
            <span>{{ $trend }}</span>
        </div>
    @endif
</div>