<template>
  <div class="flex flex-col items-center justify-center py-[90px]">
    <!-- 图片变量 -->
    <img v-if="!hasMessage" :src="imageSrc" class="w-[160px] h-[160px] mb-5" />

    <!-- 主标题变量 -->
    <div v-if="!hasMessage" class="text-[18px] font-bold text-[#2c3e50] mb-1 text-center">{{ displayMainTitle }}
    </div>

    <!-- 副标题变量 -->
    <div v-if="!hasMessage" class="flex items-center">
      <span class="w-[5px] h-[5px] bg-[#42b983] rounded-full"></span>
      <span class="text-[12px] text-[#afb9c1] ml-[6px] mr-[6px]">{{ displaySubTitle }}</span>
      <span class="w-[5px] h-[5px] bg-[#42b983] rounded-full"></span>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  hasMessage: {
    type: Boolean,
    default: false
  },
  // 图片路径
  imageSrc: {
    type: String,
    default: `https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/xiaoqi/come_chat_image.png`
  },
  // 主标题
  mainTitle: {
    type: String,
    default: ''
  },
  // 副标题
  subTitle: {
    type: String,
    default: ''
  }
});

const displayMainTitle = computed(() => props.mainTitle || t("home.chatGuide.title"));
const displaySubTitle = computed(() => props.subTitle || t("home.chatGuide.subtitle"));
</script>
