<script setup lang="ts">
import AppIcon from '@/components/ui/AppIcon.vue'

defineProps<{
  label: string
  value: string | number
  icon?: string
  color?: 'green' | 'aqua' | 'orange' | 'purple'
  sub?: string
}>()
</script>

<template>
  <div class="stats-widget" :class="`color-${color ?? 'green'}`">
    <AppIcon v-if="icon" class="widget-icon" :icon="icon" :size="28" />
    <div class="widget-body">
      <div class="widget-value">{{ value }}</div>
      <div class="widget-label">{{ label }}</div>
      <div class="widget-sub" v-if="sub">{{ sub }}</div>
    </div>
  </div>
</template>

<style scoped>
.stats-widget {
  background: var(--color-white-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.stats-widget::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.color-green::after {
  background: var(--gradient-stats-green);
}
.color-aqua::after {
  background: var(--gradient-stats-aqua);
}
.color-orange::after {
  background: var(--gradient-stats-orange);
}
.color-purple::after {
  background: var(--gradient-stats-purple);
}

.widget-icon {
  flex-shrink: 0;
  color: var(--color-text);
}
.widget-body {
  flex: 1;
  min-width: 0;
}
.widget-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 4px;
}
.widget-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.widget-sub {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
</style>
