<template>
  <v-card class="rounded-lg h-100" elevation="2" v-bind="$attrs">
    <v-card-text class="d-flex flex-column justify-space-between h-100">
      <div class="d-flex justify-space-between align-start mb-4">
        <div>
          <div class="text-subtitle-1 font-weight-bold text-grey-darken-1 mb-1">
            {{ title }}
          </div>
          <div class="text-h4 font-weight-bold">{{ value }}</div>
        </div>
        <v-icon class="opacity-80" :color="color" size="x-large" :icon="icon" />
      </div>

      <div class="d-flex justify-space-between align-center border-t pt-3">
        <span class="text-body-2 text-grey">{{ label }}</span>
        <span class="text-body-2 font-weight-medium">{{ total }}</span>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
interface Props {
  title: string
  value: string | number
  label: string
  total: string | number
  icon: string
  color: string
}

defineProps<Props>()
</script>
