<template>
  <div class="image-wrapper">
    <img
      :src="lowResSrc"
      :alt="alt"
      class="image-base blur-sm scale-105"
      :class="{ 'opacity-0': isLoaded }"
    />
    <img
      :src="highResSrc"
      :alt="alt"
      class="image-base"
      :class="{ 'opacity-0': !isLoaded }"
      @load="isLoaded = true"
    />
  </div>
</template>

<style scoped>
.image-wrapper {
  position: relative;
}

.image-base {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.image-base:last-child {
  position: absolute;
  inset: 0;
}

.blur-sm {
  filter: blur(20px);
}

.opacity-0 {
  opacity: 0;
}
</style>

<script setup>
defineProps({
  lowResSrc: { type: String, required: true },
  highResSrc: { type: String, required: true },
  alt: { type: String, default: '' },
})

const isLoaded = ref(false)
</script>
