<template>
  <div class="image-wrapper">
    <img :src="highResSrc" alt="" class="image-sizer" aria-hidden="true" />
    <div class="subwrapper">
      <img
        :src="lowResSrc"
        :alt="alt"
        class="image-low"
        :class="{ 'opacity-0': isLoaded }"
      />
      <img
        :src="highResSrc"
        :alt="alt"
        class="image-high"
        :class="{ 'opacity-0': !isLoaded }"
        @load="isLoaded = true"
      />
      <div v-if="!isLoaded" class="spinner-overlay">
        <div class="spinner" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}
.image-sizer {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden;
}
.image-low {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  height: 100%;
  filter: blur(20px);
  transition: opacity 0.3s ease;
}
.image-high {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  max-width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}
.opacity-0 {
  opacity: 0;
}
.spinner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

<script setup>
defineProps({
  lowResSrc: { type: String, required: true },
  highResSrc: { type: String, required: true },
  alt: { type: String, default: '' },
})
const isLoaded = ref(false)
</script>