@props([
  'label' => '',
  'value' => '',
  'icon' => 'bi-currency-dollar',
  'iconVariant' => 'primary',
  'trend' => '',
  'trendDirection' => 'up',
  'trendMeta' => 'vs last period',
])

<div {{ $attributes->class(['stat-card']) }}>
  <div class="stat-card__head">
    <div>
      <p class="stat-card__label">{{ $label }}</p>
      <p class="stat-card__value">{{ $value }}</p>
    </div>
    <div class="stat-card__icon stat-card__icon--{{ $iconVariant }}">
      <i class="bi {{ $icon }}" aria-hidden="true"></i>
    </div>
  </div>
  @if ($trend !== '')
    <div class="stat-card__trend stat-card__trend--{{ $trendDirection }}">
      <i class="bi bi-arrow-{{ $trendDirection === 'up' ? 'up' : 'down' }}-right" aria-hidden="true"></i>
      <span>{{ $trend }}</span>
      <span class="stat-card__trend-meta">{{ $trendMeta }}</span>
    </div>
  @endif
</div>