<script setup>
import { onMounted, ref } from "vue";

defineProps({
  src: {
    type: String,
    required: true,
  },
  alt: {
    type: String,
    default: "",
  },
  className: {
    type: String,
    default: "",
  },
});

const isIntersecting = ref(false);
const isLoaded = ref(false);
const image = ref(null);

const handleLoad = () => {
  isLoaded.value = true;
};

onMounted(() => {
  const observer = new IntersectionObserver(
    ([entry]) => {
      if (entry.isIntersecting && entry.intersectionRatio >= 0.1) {
        isIntersecting.value = true;
        observer.unobserve(image.value);
      }
    },
    { threshold: 0.1 },
  );

  observer.observe(image.value);
});
</script>

<template>
  <img
    ref="image"
    :src="isIntersecting ? src : ''"
    :alt="alt"
    :class="[
      className,
      {
        'opacity-0': !isLoaded,
        'transition-opacity duration-700 ease-out delay-75': true,
      },
    ]"
    @load="handleLoad"
  />
</template>
