<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import HitKnowledgeItem from './hit-knowledge-item.vue'

interface Props {
  knowledgeContentResult: KnowledgeContentResultItem[]
  to: string | HTMLElement
}

defineProps<Props>()

const { t } = useI18n()

const isShowDrawer = defineModel<boolean>('isShowDrawer', { required: true })
</script>

<template>
  <n-drawer
    v-model:show="isShowDrawer"
    :width="430"
    :show-mask="false"
    :trap-focus="false"
    :block-scroll="false"
    :to="to"
    class="shadow-[0_0_20px_rgba(0,4,65,0.07)]! rounded-l-[10px]!"
  >
    <n-drawer-content
      :title="t('personal_space_module.agent_module.agent_setting_module.agent_config_module.back_chunk_content')"
      header-class="border-b-0! p-5! pt-6! text-[16px]! font-family-medium!"
      body-content-class="px-5! py-0!"
      footer-class="border-t-0! py-2!"
      :native-scrollbar="false"
      closable
    >
      <div class="flex flex-col gap-[18px]">
        <HitKnowledgeItem
          v-for="(knowledgeContentResultItem, index) in knowledgeContentResult"
          :key="index"
          :content-result-item="knowledgeContentResultItem"
        />
      </div>
      <template #footer></template>
    </n-drawer-content>
  </n-drawer>
</template>
