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

<div {{ $attributes->class('intro-y report-box zoom-in') }}>
    <div class="box p-5">
        <div class="text-3xl font-medium leading-8 tabular-nums {{ $tone === 'bad' ? 'text-danger' : '' }}">
            {{ $value }}
        </div>
        <div class="text-base text-slate-500 mt-1">{{ $label }}</div>
        @if ($hint)
            <div class="mt-1 text-xs text-slate-400">{{ $hint }}</div>
        @endif
    </div>
</div>