<script lang="ts" setup>
import { inject } from 'vue'
import { Emitter } from 'mitt'
import { useI18n } from 'vue-i18n'
import CustomLoading from './custom-loading.vue'
import { useLayoutConfig } from '@/composables/useLayoutConfig'

interface Props {
  continuousQuestionList: string[]
}

const { t } = useI18n()

defineProps<Props>()

const { isMobile } = useLayoutConfig()

const emitter = inject<Emitter<MittEvents>>('emitter')

function handleSelectContinueQuestion(continueQuestion: string) {
  emitter?.emit('selectQuestion', continueQuestion)
}
</script>

<template>
  <div class="text-xs" :class="isMobile ? 'pl-0' : 'pl-10'">
    <p class="mb-3 mt-5 text-[#84868c]">{{ t('common_module.dialogue_module.continue_question_message') }}</p>
    <div v-if="continuousQuestionList.length === 0" class="mt-4 px-4">
      <CustomLoading />
    </div>

    <ul v-else class="flex max-w-full flex-col items-start justify-center gap-3 overflow-hidden">
      <li v-for="(continueQuestionItem, index) in continuousQuestionList" :key="index">
        <div
          v-show="continueQuestionItem"
          class="w-full cursor-pointer rounded-xl border border-[#d4d6d9] bg-[#ffffff80] px-[14px] py-[11px] text-[#5c5f66] hover:text-[#151b26]"
          @click="handleSelectContinueQuestion(continueQuestionItem)"
        >
          <span class="break-all">{{ continueQuestionItem }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>
