@props([
  'zone' => 'real',
  'icon' => 'fa-chart-bar',
  'color' => '#344767',
  'label' => '',
  'value' => '',
  'sub' => '',
  'helpKey' => null,
  'simId' => null,
  'valueClass' => '',
  'cardClass' => '',
])

<div @class(['card border-0 shadow-sm h-100 cons-stat-kpi app-metric-card', 'cons-stat-kpi--' . $zone, $cardClass])>
  <div class="cons-stat-kpi__icon" style="background: linear-gradient(135deg, {{ $color }} 0%, {{ $color }}dd 100%);">
    <i class="fas {{ $icon }}"></i>
  </div>
  @if($helpKey && $simId)
    <x-card-help.button :key="$helpKey" context-type="simulacao" :context-id="$simId" />
  @endif
  <div class="card-body cons-stat-kpi__body pb-3">
    <span @class(['cons-pill mb-2', $zone === 'real' ? 'cons-pill--real' : 'cons-pill--sim', 'cons-pill--xs'])>
      {{ $zone === 'real' ? 'Dado real' : 'Simulação' }}
    </span>
    <div class="cons-stat-kpi__label">{!! $label !!}</div>
    <div @class(['cons-stat-kpi__value', $valueClass])>{!! $value !!}</div>
    @if($sub)
      <div class="cons-stat-kpi__sub">{!! $sub !!}</div>
    @endif
  </div>
</div>