<template>
  <view class="more-tips bg-white border-box">
    <view class="font-size-0 whitesspace-nowrap scroll-x">
      <view
        class="more-tips-item border-box inline-block mr-8"
        v-for="(item, index) in guideWords"
        :key="index"
      >
        <text
          class="font-500 font-size-12 line-height-24 text-center"
          @click="sendReply(item)"
        >
          {{ item }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from "vue";

const emits = defineEmits(["replySent"]);

defineProps({
  guideWords: {
    type: Array,
    default: [
      "定温泉票",
      "定酒店",
      "优惠套餐",
      "亲子玩法",
      "了解交通",
      "看看酒店",
      "看看美食",
    ],
  },
});

const sendReply = (text) => {
  emits("replySent", text);
};
</script>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
