<template>
  <div class="fc-dl-stats">
    <v-chip
      v-for="s in STAT_DEFS" :key="s.value"
      :color="s.color"
      :variant="activeStatus === s.value ? 'elevated' : 'tonal'"
      :prepend-icon="s.icon"
      size="default"
      :class="{ 'fc-dl-stats__active': activeStatus === s.value }"
      @click="$emit('select', activeStatus === s.value ? null : s.value)"
    >
      {{ s.label }}
      <strong class="ms-1">{{ stats[s.value] ?? 0 }}</strong>
    </v-chip>
  </div>
</template>

<script setup>
import { DOWNLOAD_STATUSES as STAT_DEFS } from '../../utils/downloadStatus.js'

defineProps({
  stats: { type: Object, required: true },
  // The currently-active status filter value (pending|running|ok|error|
  // skipped) or null. Highlights the matching chip.
  activeStatus: { type: String, default: null },
})
defineEmits(['select'])
</script>

<style scoped>
.fc-dl-stats {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.fc-dl-stats .v-chip { cursor: pointer; }
.fc-dl-stats__active {
  outline: 2px solid rgb(var(--v-theme-on-surface) / 0.5);
  outline-offset: 1px;
}
</style>
