<template>
  <scroll-view class="cat-scroll" scroll-x :show-scrollbar="false">
    <view class="cat-tabs">
      <view v-for="c in categories" :key="c" class="cat-tab" :class="{ active: active === c }" @tap="$emit('change', c)">
        {{ c === 'all' ? '🔥 全部' : c }}
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  name: 'CategoryTab',
  props: { categories: { type: Array, default: () => [] }, active: { type: String, default: 'all' } },
  emits: ['change']
}
</script>

<style scoped>
.cat-scroll{white-space:nowrap;padding:12rpx 0}
.cat-tabs{display:inline-flex;gap:12rpx;padding:0 20rpx}
.cat-tab{display:inline-block;padding:14rpx 32rpx;border-radius:40rpx;border:1px solid var(--border);background:var(--bg-card);color:var(--text-dim);font-size:26rpx;font-weight:600;white-space:nowrap;flex-shrink:0}
.cat-tab.active{background:linear-gradient(135deg,var(--orange),var(--gold));color:#fff;border-color:transparent;font-weight:700;box-shadow:0 4rpx 24rpx rgba(245,166,35,.3)}
</style>
