@props([
    'label',
    'value',
    'detail',
    'accent' => null,
])

<article {{ $attributes->class(['metric-card', $accent]) }}>
    <div class="metric-card-header">
        <div>
            <p class="metric-label">{{ $label }}</p>
            <p class="metric-value">{{ $value }}</p>
            <p class="metric-detail">{{ $detail }}</p>
        </div>

        <div @class(['metric-hex', $accent])>
            {{ $icon }}
        </div>
    </div>
</article>