<x-ui.card>
    <div class="flex items-start justify-between gap-4">
        <div class="min-w-0">
            <p class="text-sm font-bold text-booklio-muted">{{ $label }}</p>
            <p class="mt-3 text-3xl font-extrabold leading-none text-booklio-dark">{{ $value }}</p>
            <p class="mt-4 text-xs font-semibold {{ ($tone ?? 'success') === 'danger' ? 'text-red-600' : (($tone ?? 'success') === 'warning' ? 'text-amber-600' : 'text-emerald-600') }}">{{ $note }}</p>
        </div>
        <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl {{ $color ?? 'bg-blue-50 text-booklio-primary' }}">
            <x-ui.icon :name="$icon" class="h-5 w-5" />
        </span>
    </div>
</x-ui.card>
