<template>
  <div class="bg-white shadow-[0_-1px_10px_rgba(0,0,0,0.03)] rounded-b-[20px] py-3 pl-3 pr-0">
    <div class="font-size-0 whitespace-nowrap scroll-x">
      <div v-for="(item, index) in guideWords" :key="index"
        class="inline-block mr-2 last:mr-3 bg-[#f7f7f7] rounded-[5px] box-border py-[6px] px-2">
        <span :class="['font-medium text-[12px] text-center', getColorClass(index)]" @click="sendReply(item)">
          {{ item }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { SEND_MESSAGE_CONTENT_TEXT } from "@/constants/constant";
import { defineProps } from "vue";
import { emitter } from '@/utils/events'

defineProps({
  guideWords: {
    type: Array,
    default: [],
  },
});

const getColorClass = (index) => {
  const colors = [
    "text-[#47c2ff]",
    "text-[#fb3748]",
    "text-[#1fc16b]",
    "text-[#f6b51e]",
    "text-[#7d52f4]",
    "text-[#fb4ba3]",
    "text-[#22d3bb]",
  ];
  return colors[index] || "text-[#475569]";
};

const sendReply = (item) => {
  emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item);
};
</script>
