@props([
    'title',
    'value' => '—',
    'trend' => null,
    'meta' => null,
    'detail' => null,
    'color' => 'green',
    'historicalRecord' => false,
    'periodRecord' => false,
    'badge' => null,
])

<article {{ $attributes->class([
    'metric-card',
    'metric-card--' . $color,
    'metric-card--compact',
    'metric-card--historical-record' => $historicalRecord,
    'metric-card--period-record' => $periodRecord && ! $historicalRecord,
]) }}>
    <div class="metric-card__heading">
        <p class="metric-card__label">{{ $title }}</p>
        @if ($badge)
            <span class="metric-card__micro-badge">{{ $badge }}</span>
        @endif
    </div>
    <div class="metric-card__value-row">
        <p class="metric-card__value">{{ $value }}</p>
        <x-stats.trend-badge :trend="$trend" />
    </div>
    @if ($meta || $detail)
        <p class="metric-card__meta mt-2">{{ $meta ?? $detail }}</p>
    @endif
</article>