@props(['title', 'icon', 'value', 'subvalue' => null, 'color' => 'blue', 'link' => '#'])

<a href="{{ $link }}"
   class="block bg-white shadow rounded-xl p-6 hover:shadow-lg transition group">

    <div class="flex items-center justify-between">
        <div>
            <p class="text-sm font-medium text-gray-500">{{ $title }}</p>
            <p class="text-3xl font-bold text-gray-900 mt-1">{{ $value }}</p>

            @if($subvalue)
                <p class="text-sm text-gray-400 mt-1">{{ $subvalue }}</p>
            @endif
        </div>

        <x-dynamic-component :component="'icon.' . $icon"
                             class="w-10 h-10 text-{{ $color }}-600 opacity-80 group-hover:opacity-100" />
    </div>
</a>