<template>
  <view class="hot-tags-container">
    <view
      class="hot-tag-item"
      v-for="(tag, i) in tags"
      :class="{ active: currentTag === i }"
      @click="currentTag = i"
      :key="tag"
    >
      {{ tag }}
    </view>
  </view>
</template>

<script lang="ts" setup>
  defineOptions({
    name: 'HotTags',
  })

  const currentTag = defineModel<number>('currentTag')
  const tags = ref<string[]>(['All', 'Shoes', 'Fast Food', 'Snack', 'Clothing'])
</script>

<style lang="scss" scoped>
  .hot-tags-container {
    display: flex;
    width: 100%;
    margin: 24rpx 0;
    overflow-x: scroll;
    overflow-y: hidden;

    &::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }

    .hot-tag-item {
      box-sizing: border-box;
      height: 64rpx;
      padding: 0 24rpx;
      margin-right: 24rpx;
      font-family: 'PingFang SC';
      font-size: 28rpx;
      font-style: normal;
      font-weight: 500;
      line-height: 64rpx;
      color: $shop-text-3;
      white-space: nowrap;
      border: 2rpx solid $shop-bg-line;
      border-radius: 32rpx;

      &.active {
        color: $shop-white;
        background-color: $shop-primary;
        border: 2rpx solid $shop-primary;
      }
    }
  }
</style>
