@props(['label', 'value', 'color' => 'navy', 'href' => null, 'subtitle' => null])

@php
$accentClasses = match($color) {
    'gold' => 'border-l-gold bg-gold-50/50',
    'green' => 'border-l-green-500 bg-green-50/50',
    'amber' => 'border-l-amber-500 bg-amber-50/50',
    'blue' => 'border-l-blue-500 bg-blue-50/50',
    default => 'border-l-navy bg-white',
};
$tag = $href ? 'a' : 'div';
@endphp

<{{ $tag }} @if($href) href="{{ $href }}" @endif class="rounded-xl border border-gray-200/60 shadow-sm {{ $accentClasses }} border-l-4 p-5 transition-shadow hover:shadow-md block {{ $href ? 'cursor-pointer' : '' }}">
    <p class="text-xs font-semibold uppercase tracking-wider text-gray-400">{{ $label }}</p>
    <p class="mt-2 text-3xl font-bold text-navy tabular-nums">{{ $value }}</p>
    @if($subtitle)
        <p class="mt-1 text-xs text-gray-400">{{ $subtitle }}</p>
    @endif
</{{ $tag }}>