<template>
  <div class="filter-button-container">
    <button
      v-for="item in filterItems"
      :key="item.value"
      class="filter-btn"
      :class="{ active: activeValue === item.value }"
      @click="handleClick(item.value)"
    >
      {{ item.label }} ({{ item.sum }})
    </button>
  </div>
</template>

<script setup>
defineProps({
  filterItems: {
    type: Array,
    required: true
  },
  activeValue: {
    type: String,
    default: 'all'
  }
});

const emit = defineEmits(['filter-change']);

const handleClick = (value) => {
  emit('filter-change', value);
};
</script>

<style scoped>
.filter-button-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.filter-btn {
  padding: 6px 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fff;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.filter-btn.active {
  color: #409eff;
  border-color: #409eff;
  background-color: #ecf5ff;
}
</style>
