<template>
  <scroll-view scroll-x>
    <FlexRow gap="gap.lg">
      <template
        v-for="(tag, k) in tags"
        :key="k" 
      >
        <Touchable @click="emit('update:active', tag)">
          <BackgroundBox 
            v-if="tag"
            :backgroundImage="tag === active ? 
              'https://xy.wenlvti.net/app_static/images/village/TagActive.png' : 
              'https://xy.wenlvti.net/app_static/images/village/TagNormal.png'"
            :backgroundCutBorder="[10, 10, 10, 10]"
            :backgroundCutBorderSize="[10, 10, 10, 10]"
            :padding="[20, 30]"
            :text="tag"
          >
            <Text :text="tag" fontConfig="contentText" :color="tag === active ? 'white' : 'text.content'" />
          </BackgroundBox>
        </Touchable>
      </template>
    </FlexRow>
  </scroll-view>
</template>

<script setup lang="ts">
import { type PropType } from 'vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import Text from '@/components/basic/Text.vue';
import Touchable from '@/components/feedback/Touchable.vue';

const props = defineProps({
  tags: {
    type: Array as PropType<string[]>,
    default: null,
  },
  active: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:active']);
</script>