<template>
  <view class="filter-tabs">
    <view
      v-for="tab in tabs"
      :key="tab.id"
      class="filter-tabs__item"
      :class="{ 'filter-tabs__item--active': modelValue === tab.id }"
      @click="$emit('update:modelValue', tab.id)"
    >
      <text>{{ tab.label }}</text>
    </view>
  </view>
</template>

<script setup>
defineProps({
  tabs: { type: Array, default: () => [] },
  modelValue: { type: String, default: '' }
})

defineEmits(['update:modelValue'])
</script>

<style lang="scss" scoped>
.filter-tabs {
  display: flex;
  gap: 8rpx;
  padding: 8rpx;
  flex-wrap: wrap;

  &__item {
    padding: 12rpx 20rpx;
    border-radius: 8rpx;
    background-color: $bg-tertiary;
    color: $text-secondary;
    font-size: 24rpx;
    transition: all 0.2s;

    &:active {
      transform: scale(0.95);
    }

    &--active {
      background-color: $accent;
      color: $bg-primary;
    }
  }
}
</style>
