@props(['label', 'value', 'icon' => 'chart-bar', 'tone' => 'brand', 'href' => null, 'hint' => null])
@php($tag = $href ? 'a' : 'div')
{{-- The card is a size container: the icon and chevron only appear when the card is wide enough,
     and the label wraps instead of being cut off, so it reads well from phones to wide screens. --}}
<{{ $tag }} @if ($href) href="{{ $href }}" wire:navigate @endif
    {{ $attributes->class(['card group @container block p-4 sm:p-5', 'transition hover:-translate-y-0.5 hover:shadow-md hover:ring-brand-200' => $href]) }}>
    <div class="flex items-start gap-3 @[15rem]:gap-4">
        <span class="icon-tile tone-{{ $tone }} hidden @[10rem]:inline-flex"><x-icon :name="$icon" class="size-5" /></span>
        <div class="min-w-0 flex-1">
            <p class="text-sm font-medium leading-snug text-slate-500">{{ $label }}</p>
            <p class="mt-1 text-2xl font-semibold tabular-nums tracking-tight text-slate-900">{{ $value }}</p>
            @if ($hint)
                <p class="mt-0.5 line-clamp-2 text-xs text-slate-500" title="{{ $hint }}">{{ $hint }}</p>
            @endif
        </div>
        @if ($href)
            <x-icon name="chevron-right" class="mt-0.5 hidden size-4 shrink-0 text-slate-300 transition group-hover:text-brand-500 @[10rem]:block" />
        @endif
    </div>
</{{ $tag }}>