<template>
  <div class="file-preview-strip">
    <!-- Images -->
    <div
      v-for="(src, i) in chat.pendingImages"
      :key="`img-${i}`"
      class="file-preview-image"
    >
      <img :src="src" alt="attachment" />
      <button class="file-preview-remove" @click="removeImage(i)" title="Remove">
        <i class="ph ph-x"></i>
      </button>
    </div>

    <!-- Files -->
    <div
      v-for="(file, i) in chat.pendingFiles"
      :key="`file-${i}`"
      class="file-preview-pill"
    >
      <i class="ph ph-file"></i>
      <span :title="file.name">{{ file.name }}</span>
      <button class="file-preview-remove" @click="removeFile(i)" title="Remove">
        <i class="ph ph-x"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { useChatStore } from '@/stores/chat.js'
import { useFileUpload } from '@/composables/useFileUpload.js'

const chat = useChatStore()
const { removeImage, removeFile } = useFileUpload()
</script>

<style scoped>
.file-preview-image {
  position: relative;

  .file-preview-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--surface-panel, #1f2335);
    border: 1px solid var(--border-color-muted);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    color: var(--color-text-dark);

    &:hover { color: var(--color-error); }
  }
}
</style>