<template>
  <div class="review-filter">
    <div class="filter-group">
      <span class="filter-label">按场景：</span>
      <button
        class="filter-btn"
        :class="{ active: !activeScene }"
        @click="$emit('filterScene', '')"
      >全部</button>
      <button
        v-for="s in scenes"
        :key="s"
        class="filter-btn"
        :class="{ active: activeScene === s }"
        @click="$emit('filterScene', s)"
      >{{ s }}</button>
    </div>
    <div class="filter-group">
      <span class="filter-label">按关心点：</span>
      <button
        class="filter-btn"
        :class="{ active: !activeConcern }"
        @click="$emit('filterConcern', '')"
      >全部</button>
      <button
        v-for="c in concerns"
        :key="c"
        class="filter-btn"
        :class="{ active: activeConcern === c }"
        @click="$emit('filterConcern', c)"
      >{{ c }}</button>
    </div>
  </div>
</template>

<script setup>
defineProps({
  scenes: { type: Array, required: true },
  concerns: { type: Array, required: true },
  activeScene: { type: String, default: '' },
  activeConcern: { type: String, default: '' },
})
defineEmits(['filterScene', 'filterConcern'])
</script>

<style lang="less" scoped>
.review-filter {
  margin-bottom: @space-xl;
  display: flex;
  flex-direction: column;
  gap: @space-md;
  padding: @space-lg;
  background: @color-bg-gray;
  border-radius: @border-radius-md;
}
.filter-group { display: flex; align-items: flex-start; flex-wrap: wrap; gap: @space-xs; }
.filter-label {
  font-size: @font-size-sm;
  color: @color-text-muted;
  white-space: nowrap;
  line-height: 44px;
  margin-right: @space-xs;
}
.filter-btn {
  padding: @space-sm @space-md;
  font-size: @font-size-sm;
  border: 1px solid @color-border;
  background: @color-bg-white;
  border-radius: @border-radius-full;
  cursor: pointer;
  color: @color-text-secondary;
  transition: all @transition-fast;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  &:hover { border-color: @color-primary; color: @color-primary; }
  &.active { background: @color-primary; color: #fff; border-color: @color-primary; }
}
</style>
