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

@php
    $tones = [
        'brand' => 'bg-brand-50 text-brand-700',
        'green' => 'bg-emerald-50 text-emerald-700',
        'amber' => 'bg-amber-50 text-amber-700',
        'red' => 'bg-red-50 text-red-700',
        'blue' => 'bg-blue-50 text-blue-700',
        'indigo' => 'bg-indigo-50 text-indigo-700',
        'slate' => 'bg-slate-100 text-slate-700',
    ];

    $tag = $href ? 'a' : 'div';
@endphp

<{{ $tag }} @if ($href) href="{{ $href }}" @endif
    {{ $attributes->merge(['class' => 'hms-card block px-5 py-4 transition'.($href ? ' hover:shadow-raised' : '')]) }}>
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
            <p class="truncate text-xs font-semibold uppercase tracking-wide text-slate-500">{{ $label }}</p>
            <p class="mt-1.5 text-2xl font-semibold tabular-nums text-slate-900">{{ $value }}</p>

            @if ($hint)
                <p class="mt-1 text-xs text-slate-500">{{ $hint }}</p>
            @endif
        </div>

        @if ($icon)
            <span class="rounded-lg p-2 {{ $tones[$tone] ?? $tones['brand'] }}">
                <x-icon :name="$icon" size="lg" />
            </span>
        @endif
    </div>
</{{ $tag }}>