<template>
  <div v-if="img" :class="theme" class="mobile-image">
    <ImageWebpWrapper
      :image-default="img.default"
      :image-webp="img.webp"
      :height="img.height"
      :width="img.width"
      :lazy-load-enable="false"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import imgArrowPng from '@/assets/img/backgrounds/section-cta-dark-arrow.png';
import imgArrowWebp from '@/assets/img/backgrounds/section-cta-dark-arrow.webp';

import imgLightPng from '@/assets/img/static-icons/get-leads.png';
import imgLightWebp from '@/assets/img/static-icons/get-leads.webp';

import ImageWebpWrapper from '@/components/ui/ImageWebpWrapper.vue';

export default defineComponent({
  components: { ImageWebpWrapper },

  props: {
    theme: {
      type: String as PropType<ISectionCta.Theme>,
      required: true,
    },
  },

  computed: {
    img(): {
      default: string;
      webp: string;
      width: number;
      height: number;
    } | null {
      return {
        'dark-arrow': {
          default: imgArrowPng,
          webp: imgArrowWebp,
          width: 521,
          height: 408,
        },
        light: {
          default: imgLightPng,
          webp: imgLightWebp,
          width: 249,
          height: 228,
        },
        'dark-coins': null,
      }[this.theme];
    },
  },
});
</script>

<style lang="scss" scoped>
.mobile-image {
  display: none;

  &.light {
    position: absolute;
    top: -80px;
    right: -30px;
  }

  &.dark-arrow {
    margin-left: -60px;

    img {
      width: 100%;
      height: auto;
    }
  }
}
</style>
