{% if href %}<a href="{{ href }}" class="block card-hover">{% endif %}
<div class="bg-white rounded-2xl border border-surface-200 p-5 hover:shadow-sm transition-shadow">
    <div class="flex items-center justify-between">
        <div class="flex-1">
            <p class="text-sm font-medium text-surface-500">{{ label }}</p>
            <p class="mt-1 text-2xl font-bold text-surface-900">{{ value }}</p>
            {% if change %}
            <p class="mt-1 text-sm {% if change_type == 'positive' %}text-green-600{% elif change_type == 'negative' %}text-red-600{% else %}text-surface-500{% endif %}">
                {% if change_type == 'positive' %}&#9650;{% elif change_type == 'negative' %}&#9660;{% endif %}
                {{ change }}
            </p>
            {% endif %}
        </div>
        {% if icon %}
        <div class="text-3xl ml-4">{{ icon }}</div>
        {% endif %}
    </div>
</div>
{% if href %}</a>{% endif %}