@props(['label', 'value', 'tone' => 'neutral', 'sub' => null])

@php
    $color = match ($tone) {
        'danger' => 'var(--portal-danger-ink)',
        'warning' => 'var(--portal-warning-ink)',
        'success' => 'var(--portal-success-ink)',
        'brand' => 'var(--portal-link)',
        default => 'var(--portal-ink)',
    };
@endphp

<div class="portal-card px-3 py-3">
    <p class="text-[11px] font-medium" style="color: var(--portal-muted);">{{ $label }}</p>
    {{-- Large type for the things members actually open the app to check. --}}
    <p class="num mt-1 text-2xl font-extrabold leading-none" style="color: {{ $color }};">{{ $value }}</p>
    @if($sub)
        <p class="mt-1 text-[11px]" style="color: var(--portal-muted);">{{ $sub }}</p>
    @endif
</div>
