@props([
  'label' => '',
  'value' => '',
  'delta' => '',
  'deltaDirection' => 'up',
  'hint' => '',
  'chartId' => null,
])

<div {{ $attributes->class(['revenue-card']) }}>
  <div class="revenue-card__meta">
    <p class="revenue-card__label">{{ $label }}</p>
    <p class="revenue-card__value">{{ $value }}</p>
    @if ($delta !== '')
      <p class="revenue-card__delta revenue-card__delta--{{ $deltaDirection }}">
        <i class="bi bi-arrow-{{ $deltaDirection === 'up' ? 'up' : 'down' }}-right" aria-hidden="true"></i>
        {{ $delta }}
        @if ($hint !== '')
          <span class="revenue-card__hint">{{ $hint }}</span>
        @endif
      </p>
    @endif
  </div>
  @if ($chartId)
    <div id="{{ $chartId }}" class="revenue-card__chart" aria-hidden="true"></div>
  @endif
  {{ $slot }}
</div>