<template>
  <iframe
    ref="iframe"
    :src="lazySrc"
    class="nuxt-booster-iframe"
    v-bind="$attrs"
    :title="title"
    @load="onLoad"
  />
</template>

<script setup>
import { useBoosterComponentObserver } from "#imports";
import { ref, watch } from "vue";
const $props = defineProps({
  src: { type: String, required: true },
  title: { type: String, required: false },
  componentObserver: { type: Object, required: false }
});
const $emit = defineEmits(["load", "enter"]);
const { el: iframe, inView } = useBoosterComponentObserver(
  $props.componentObserver || {}
);
const lazySrc = ref(void 0);
function onLoad(e) {
  const target = e.target;
  if (target?.src) {
    $emit("load", e);
  }
}
watch(inView, () => {
  lazySrc.value = $props.src;
  $emit("enter");
});
</script>

<style lang="postcss" scoped>
iframe {
  border: none;
}
</style>
