@props(['label', 'value', 'hint' => null, 'tone' => 'slate'])

@php
    $tons = [
        'slate' => 'text-slate-900',
        'brand' => 'text-brand-700',
        'emerald' => 'text-emerald-700',
        'amber' => 'text-amber-700',
        'rose' => 'text-rose-700',
    ];
@endphp

<div {{ $attributes->merge(['class' => 'card card-pad']) }}>
    <p class="text-xs font-semibold tracking-wide text-slate-500 uppercase">{{ $label }}</p>
    <p class="tabular mt-2 text-2xl font-semibold {{ $tons[$tone] ?? $tons['slate'] }}">{{ $value }}</p>
    @if ($hint)
        <p class="mt-1 text-xs text-slate-500">{{ $hint }}</p>
    @endif
</div>