<script setup lang="ts">
//! 图片输入预览 — 待发送图片缩略图列表,从 ChatInput.vue 提取
//!
//! 职责:显示待发送图片缩略图、移除按钮。不含图片读取/粘贴/拖拽逻辑。

import { useI18n } from 'vue-i18n'

const { t } = useI18n()

defineProps<{
  /** 待发送图片列表 */
  pendingImages: { id: string; dataUrl: string; mediaType: string }[]
}>()

const emit = defineEmits<{
  (e: 'remove', id: string): void
}>()
</script>

<template>
  <div v-if="pendingImages.length" class="ai-img-preview-row">
    <div v-for="img in pendingImages" :key="img.id" class="ai-img-preview">
      <img :src="img.dataUrl" :alt="t('aiChat.imagePreviewAlt')" class="ai-img-preview-thumb" />
      <button
        type="button"
        class="ai-img-preview-x"
        :title="t('aiChat.removeImage')"
        :aria-label="t('aiChat.removeImage')"
        @click="emit('remove', img.id)"
      >&times;</button>
    </div>
  </div>
</template>
