@props([
    'label',
    'count',
    'href',
    'description',
    'valueClass' => 'text-gray-900',
])

<x-page.card>
    <p class="text-sm text-gray-500">{{ $label }}</p>
    @if ($count > 0)
        <a
            href="{{ $href }}"
            class="mt-1 block text-3xl font-semibold {{ $valueClass }} underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
            title="Ver lista detalhada"
        >
            {{ number_format($count, 0, ',', '.') }}
        </a>
        <p class="mt-1 text-xs text-blue-600">
            <a href="{{ $href }}" class="hover:underline">Ver lista →</a>
        </p>
    @else
        <p class="mt-1 text-3xl font-semibold text-gray-400">
            {{ number_format($count, 0, ',', '.') }}
        </p>
    @endif
    <p class="mt-2 break-words text-xs text-gray-500">{{ $description }}</p>
</x-page.card>