export default {
  template: `
     <div class="flex gap-2">
     <button
       class="border rounded p-1 text-xs"
       @click="$emit('change', tag)"
       v-for="tag in tags"
       :class="getButtonClass(tag)"
     >
       {{ tag }}
     </button>
   </div>
     `,

  props: {
    initTags: Array,
    currentTag: String,
  },

  computed: {
    tags() {
      return ["all", ...new Set(this.initTags)];
    },
  },

  methods: {
    getButtonClass(tag) {
      return {
        "border-blue-500 text-blue-400": tag === this.currentTag,
      };
    },
  },
};