<template>
  <div style="display: none">
    <img
      v-for="(url, index) in imageUrls"
      :key="index"
      :src="url"
      alt=""
      @load="handleImageLoad(index)"
      @error="handleImageError(index)"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// Internal array of images to preload
const imageUrls = ref<string[]>([
  '/assets/ui-elements/ui-border-4-corners.svg',
  '/assets/ui-elements/ui-border-4-corners-light.svg',
  '/assets/ui-elements/ui-border-4-corners-small.svg'
])

const loadedImages = ref<Set<number>>(new Set())

const handleImageLoad = (index: number) => {
  loadedImages.value.add(index)
  console.log(`Image ${index} loaded:`, imageUrls.value[index])
}

const handleImageError = (index: number) => {
  console.log(`Image ${index} failed to load:`, imageUrls.value[index])
}
</script>