<template>
  <div class="flex flex-wrap px-3 py-1.5">
    <div v-for="(item, index) in tags" :key="index"
      class="border border-white bg-white/50 rounded-lg px-2.5 py-1 mr-2 mb-2 inline-flex items-center justify-center"
      @click="handleClick(item)">
      <span class="text-[14px] text-[#0ccd58]">{{ item }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from "vue";
import { emitter } from '@/utils/events'
import {
  SCROLL_TO_BOTTOM,
  SEND_MESSAGE_CONTENT_TEXT,
} from "@/constants/constant";

const props = defineProps({
  question: {
    type: String,
    default: "",
  },
});

const tags = ref([]);

const handleClick = (item) => {
  emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item);
};

onMounted(() => {
  tags.value = props.question.split(/[&|;]/).filter((tag) => tag.trim() !== "");
  nextTick(() => {
    setTimeout(() => {
      emitter.emit(SCROLL_TO_BOTTOM, true);
    }, 300);
  });
});
</script>
