<template>
  <view 
    class="d-flex flex-row flex-wrap mt-2"
  >
    <view 
      v-for="(tag, k) in tags"
      :key="k" 
      class="bg-place mr-2 mb-2"
      :style="{
        maxWidth: '220rpx',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      }"
      :class="[
        tag ? '' : 'd-none',
        small ? 'radius-l p-2 pt-0 pb-1' : 'radius-ll p-25 pt-1',
      ]"
    >
      <text class="color-text-content-second size-ss">{{ tag }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, type PropType } from 'vue';

const props = defineProps({
  tags: {
    type: Array as PropType<string[]>,
    default: null,
  },
  tags2: {
    type: Array as PropType<string[]>,
    default: null,
  },
  small: {
    type: Boolean,
    default: false, 
  }
})

const tagss = computed(() => {
  if (props.tags && props.tags.length > 0) {
    return props.tags;
  } else if (props.tags2) {
    return props.tags2;
  } else {
    return [];
  }
})
</script>