@props(['label', 'value', 'detail' => null, 'tone' => 'green', 'href' => null])

@php
    $tones = [
        'green' => 'bg-[#ecfdf3] text-[#166534]',
        'amber' => 'bg-[#fff7e6] text-[#92400e]',
        'red' => 'bg-[#fef3f2] text-[#b42318]',
        'blue' => 'bg-[#eff6ff] text-[#1d4ed8]',
    ];
@endphp

@if ($href)
<a href="{{ $href }}" aria-label="View {{ $label }}" class="mb-panel group block min-w-0 p-4 transition duration-150 hover:border-[#b9bec6] hover:bg-[#fafafb] hover:shadow-[0_3px_10px_rgba(48,21,42,0.08)] focus:outline-none focus:ring-2 focus:ring-[#c91822] focus:ring-offset-2 sm:p-5">
@else
<article class="mb-panel min-w-0 p-4 sm:p-5">
@endif
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
            <p class="text-xs font-semibold text-[#64616a]">{{ $label }}</p>
            <p class="mb-data mt-2 truncate text-2xl font-bold leading-none text-[#202124]">{{ $value }}</p>
        </div>
        <span class="flex size-9 shrink-0 items-center justify-center {{ $tones[$tone] ?? $tones['green'] }}" style="border-radius: 5px;">
            @isset($icon)
                {{ $icon }}
            @else
                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <path d="M5 19V10M12 19V5M19 19v-7" />
                </svg>
            @endisset
        </span>
    </div>
    @if ($detail)
        <p class="mt-3 text-xs text-[#64616a]">{{ $detail }}</p>
    @endif
@if ($href)
</a>
@else
</article>
@endif