<script setup lang="ts">
const stats = [
  { label: '题库', value: '0', tone: 'moss' },
  { label: '题目', value: '0', tone: 'indigo' },
  { label: '今日作答', value: '0', tone: 'amber' },
  { label: '平均正确率', value: '--', tone: 'moss' },
]
</script>

<template>
  <div class="dashboard-grid">
    <section v-for="item in stats" :key="item.label" class="stat-card">
      <p>{{ item.label }}</p>
      <strong>{{ item.value }}</strong>
    </section>
    <section class="panel dashboard-wide">
      <h2 class="page-title">今日工作</h2>
      <ElEmpty description="完成数据库配置并导入题库后，这里会显示练习趋势和班级排行。" />
    </section>
  </div>
</template>

<style scoped>
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stat-card {
  padding: 18px;
  border-radius: 8px;
  border: 1px solid var(--qq-line);
  background: white;
}

.stat-card p {
  margin: 0 0 12px;
  color: var(--qq-muted);
}

.stat-card strong {
  font-size: 30px;
}

.dashboard-wide {
  grid-column: 1 / -1;
  padding: 20px;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}
</style>
