<script lang="ts" setup>
interface Props {
  title: string
  stats: string | number
  icon: string
  color?: string
}

withDefaults(defineProps<Props>(), {
  color: 'primary',
})
</script>

<template>
  <VCard>
    <VCardText class="d-flex align-center gap-4">
      <VAvatar :color="color" variant="tonal" rounded size="44">
        <VIcon :icon="icon" size="26" />
      </VAvatar>
      <div>
        <div class="text-body-2 text-medium-emphasis">{{ title }}</div>
        <div class="text-h5 font-weight-semibold">{{ stats }}</div>
      </div>
    </VCardText>
  </VCard>
</template>
