@props(['label', 'value', 'sub' => null, 'colour' => 'gray', 'href' => null])

@php
$bg = match($colour) {
    'green'  => 'bg-green-50 border-green-100',
    'blue'   => 'bg-blue-50 border-blue-100',
    'amber'  => 'bg-amber-50 border-amber-100',
    'red'    => 'bg-red-50 border-red-100',
    'teal'   => 'bg-teal-50 border-teal-100',
    'purple' => 'bg-purple-50 border-purple-100',
    default  => 'bg-white border-gray-100',
};
$tag = $href ? 'a' : 'div';
@endphp

<{{ $tag }} @if($href) href="{{ $href }}" @endif
   class="rounded-xl border p-5 {{ $bg }} @if($href) hover:shadow-md transition-shadow @endif">
    <p class="text-sm font-medium text-gray-500">{{ $label }}</p>
    <p class="mt-1 text-2xl font-bold text-gray-900">{{ $value }}</p>
    @if($sub)
        <p class="mt-1 text-xs text-gray-500">{{ $sub }}</p>
    @endif
</{{ $tag }}>
