<template>
  <div class="flex items-center justify-center">
    <button
      @click="$refs.fileInput.click()"
      class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
    >
      Upload GPX Files
    </button>
    
    <input
      ref="fileInput"
      type="file"
      multiple
      accept=".gpx"
      class="hidden"
      @change="handleFileSelect"
    />
    
    <!-- File list -->
    <div v-if="uploadedFiles.length > 0" class="ml-4 text-sm text-gray-600">
      {{ uploadedFiles.length }} file{{ uploadedFiles.length > 1 ? 's' : '' }} uploaded
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'FileUpload',
  emits: ['files-uploaded'],
  setup(props, { emit }) {
    const uploadedFiles = ref([])

    const handleFileSelect = (event) => {
      const files = Array.from(event.target.files)
      processFiles(files)
    }

    const processFiles = (files) => {
      if (files.length === 0) return

      uploadedFiles.value = [...uploadedFiles.value, ...files]
      emit('files-uploaded', files)
    }

    return {
      uploadedFiles,
      handleFileSelect
    }
  }
}
</script>