<!-- StatsCard 统计卡片 -->
<script setup lang="ts">
interface StatItem {
  title: string;
  value: number;
  icon: string;
  color: string;
  trend?: string;
}

const props = defineProps<{
  stat: StatItem;
}>();
</script>

<template>
  <div class="stats-card">
    <div class="card-header">
      <el-icon class="card-icon" :style="{ color: stat.color }">
        <component :is="stat.icon" />
      </el-icon>
      <span class="card-title">{{ stat.title }}</span>
    </div>

    <div class="card-body">
      <div class="card-value">
        {{ stat.value }}
      </div>
      <div v-if="stat.trend" class="card-trend" :class="{ 'trend-up': stat.trend.startsWith('+'), 'trend-down': stat.trend.startsWith('-') }">
        {{ stat.trend }}
      </div>
    </div>

    <div class="card-footer">
      <div class="mini-chart-placeholder">
        <!-- TODO: Add ECharts mini-chart here -->
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.stats-card {
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--color-border);
  transition: all var(--transition);
  cursor: pointer;

  &:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent-light);
  }

  .card-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;

    .card-icon {
      width: 32px;
      height: 32px;
      font-size: 32px;
    }

    .card-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--color-text-secondary);
    }
  }

  .card-body {
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 12px;

    .card-value {
      font-size: 32px;
      font-weight: 700;
      color: var(--color-text-primary);
      line-height: 1;
    }

    .card-trend {
      font-size: 14px;
      font-weight: 500;
      padding: 2px 6px;
      border-radius: var(--radius-sm);

      &.trend-up {
        color: var(--color-success);
        background-color: rgb(34 197 94 / 10%);
      }

      &.trend-down {
        color: var(--color-danger);
        background-color: rgb(239 68 68 / 10%);
      }
    }
  }

  .card-footer {
    .mini-chart-placeholder {
      height: 40px;
      background-color: var(--color-bg-light);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--color-text-light);
    }
  }
}
</style>
