<template>
  <div class="form-group">
    <label :for="id" class="form-label">
      <i class="fas fa-paperclip"></i> Pièces jointes
    </label>
    <input
      :id="id"
      type="file"
      class="form-control"
      multiple
      @change="handleFileChange"
    />
    <small class="text-muted"
      >Formats acceptés: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG</small
    >
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
  id: {
    type: String,
    default: "webmailing-attachments",
  },
});

const emit = defineEmits(["files-selected"]);

const handleFileChange = (event) => {
  const files = event.target.files;
  const fileList = Array.from(files).map((file) => ({
    name: file.name,
    size: file.size,
    type: file.type,
  }));
  emit("files-selected", fileList);
};
</script>
