<script setup>
defineProps({
    icon: {
        type: String,
        required: true
    },
    label: {
        type: String,
        required: true
    },
    value: {
        type: [String, Number],
        required: true
    },
    helper: {
        type: String,
        default: null
    }
});
</script>

<template>
    <div class="card flex flex-col gap-3 transition hover:-translate-y-0.5 hover:shadow-md">
        <div class="flex items-center justify-between">
            <p class="text-xs font-medium uppercase tracking-widest text-surface-400">
                {{ label }}
            </p>
            <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-primary-50 dark:bg-primary-900/40">
                <i :class="[icon, 'text-primary-600 dark:text-primary-300']" />
            </span>
        </div>
        <p class="text-2xl font-semibold text-surface-900 dark:text-surface-0">
            {{ value }}
        </p>
        <p v-if="helper" class="text-xs text-surface-500 dark:text-surface-400">
            {{ helper }}
        </p>
    </div>
</template>
