<script setup lang="ts">
defineProps<{
    label: string;
    count: number;
    weeklyGrowth: number;
    icon: string;
}>();
</script>

<template>
    <v-card class="pa-5 d-flex align-center justify-space-between">
        <div>
            <div class="text-caption text-medium-emphasis">{{ label }}</div>
            <div class="text-h5 font-weight-medium">{{ count }}</div>
        </div>
        <div class="text-caption "><slot/></div>
        <div class="text-right">
            <div class="d-flex align-center justify-end ga-1">
                <v-icon :icon="icon" color="success" size="20" />
                <span class="text-h6 font-weight-medium text-success">+{{ weeklyGrowth }}</span>
            </div>
            <div class="text-caption text-disabled">new this week </div>
        </div>
    </v-card>
</template>
