<template>
  <FlexRow wrap :gap="10">
    <template
      v-for="(tag, k) in tags"
      :key="k" 
    >
      <Tag 
        v-if="tag"
        :innerStyle="{
          maxWidth: '160rpx',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        }"
        :size="small ? 'small' : 'medium'"
        :text="tag"
        scheme="light"
      />
    </template>
  </FlexRow>
</template>

<script setup lang="ts">
import { computed, type PropType } from 'vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Tag from '@/components/display/Tag.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>