<template>
  <picture v-if="lazyLoadEnable" class="lazy-picture">
    <source
      :data-srcset="imageWebp"
      :srcset="imageWebpPlaceholder"
      v-bind="$attrs"
      type="image/webp"
      class="image notLoaded w-full h-full object-cover" />
    <img
      v-bind="$attrs"
      :src="imageDefaultPlaceholder"
      :data-src="imageDefault"
      class="image w-full h-full object-cover notLoaded"
      loading="lazy" />
  </picture>
  <picture v-else>
    <source
      :srcset="imageWebp"
      v-bind="$attrs"
      type="image/webp"
      class="image w-full h-full object-cover" />
    <img v-bind="$attrs" :src="imageDefault" class="image w-full h-full object-cover" loading="lazy" />
  </picture>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import imageWebpPlaceholder from '@/assets/img/lazy-load/transparent.webp';
import imageDefaultPlaceholder from '@/assets/img/lazy-load/transparent.png';

export default defineComponent({
  name: 'ImageWebpWrapper',

  props: {
    imageDefault: {
      type: String,
      required: true,
    },
    imageWebp: {
      type: String,
      required: true,
    },
    lazyLoadEnable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      imageWebpPlaceholder,
      imageDefaultPlaceholder,
    };
  },
});
</script>
