<script setup lang="ts">
export interface StatCardItem {
  subtitle: string
  title: string
  icon: string
  color: string
}

defineProps<{
  items: StatCardItem[]
}>()
</script>

<template>
  <v-row>
    <v-col
      v-for="(item, i) in items"
      :key="i"
      cols="6"
      sm="3"
    >
      <v-card
        elevation="0"
        rounded="xl"
        border
        class="stat-card"
      >
        <v-card-text class="pa-4 d-flex align-center justify-space-between">
          <div>
            <div
              class="text-caption text-medium-emphasis mb-1"
              style="font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase"
            >
              {{ item.subtitle }}
            </div>
            <div
              class="font-weight-bold"
              :class="'text-' + item.color"
              style="font-size: 36px; line-height: 1.1"
            >
              {{ item.title }}
            </div>
          </div>
          <v-avatar :color="item.color" size="48" rounded="lg" class="stat-icon">
            <v-icon :icon="item.icon" size="24" color="white" />
          </v-avatar>
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
</template>

<style scoped>
.stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 24px rgba(var(--v-theme-primary), 0.08) !important;
}
.stat-icon {
  transition: transform 0.3s ease;
}
.stat-card:hover .stat-icon {
  transform: scale(1.1);
}
</style>
