<template>
  <scroll-view
    class="filter-tabs bg-white flex gap-2 px-4 py-3 hide-scrollbar"
    scroll-x
    show-scrollbar="false"
  >
    <view
      v-for="tab in tabs"
      :key="tab.value"
      class="filter-tab clickable"
      :class="{ active: modelValue === tab.value }"
      @click="onSelect(tab.value)"
    >
      {{ tab.label }}
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
export interface FilterTab {
  label: string
  value: string
}

const props = defineProps<{
  tabs: FilterTab[]
  modelValue: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'change', value: string): void
}>()

function onSelect(value: string) {
  if (value === props.modelValue) return
  emit('update:modelValue', value)
  emit('change', value)
}
</script>

<style scoped>
.filter-tabs {
  white-space: nowrap;
}

.filter-tab {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  background: $surface;
  color: $text-secondary;
  border: 1px solid $border-color;
  transition: all 0.2s ease;
}

.filter-tab.active {
  background: $primary;
  color: #fff;
  border-color: $primary;
}

.filter-tab:active {
  transform: scale(0.95);
}
</style>
