@props([
    'label',
    'value',
    'icon' => 'bi-activity',
    'detail' => null,
    'tone' => 'primary',
    'href' => null,
])

<article class="dashboard-stat card-francoach h-100">
    <div class="dashboard-stat__icon dashboard-stat__icon--{{ $tone }}">
        @if (str_starts_with($icon, 'bi-'))
            <i class="bi {{ $icon }}" aria-hidden="true"></i>
        @else
            <x-icon :name="$icon" />
        @endif
    </div>
    <div class="dashboard-stat__content">
        <p class="dashboard-stat__label">{{ $label }}</p>
        <p class="dashboard-stat__value">{{ $value }}</p>
        @if ($detail)
            <p class="dashboard-stat__detail">{{ $detail }}</p>
        @endif
    </div>
    @if ($href)
        <a href="{{ $href }}" class="dashboard-stat__link" aria-label="Apri {{ $label }}">
            <i class="bi bi-arrow-right" aria-hidden="true"></i>
        </a>
    @endif
</article>