<template>
  <div :class="imageClass">
    <img
      v-if="sectionImage?.hasContent"
      class="section-image__element"
      :src="sectionImage.highResolutionDesktopImage"
      loading="lazy"
      alt=""
    />

    <template v-for="(element, index) in highlights" :key="`${element.text?.value}__${index}`">
      <img
        v-if="element.design.visible"
        :class="[
          'section-image__element',
          'section-image__element--highlighted',
          `section-image__element--${index + 1}`,
        ]"
        :src="element.image?.highResolutionDesktopImage"
        loading="lazy"
        alt=""
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import {
  ImageContent,
  useLayoutElementDesign,
} from '@lightspeed/crane';
import { computed } from 'vue';
import { Highlight } from '../composables/highlighted-text-image-list.ts';

defineProps<{
  sectionImage: ImageContent;
  highlights: Highlight[];
}>();

const layoutDesign = useLayoutElementDesign();

const imageClass = computed(() => [
  'section-image',
  {
    'section-image--with-border-radius': layoutDesign.layout === 'Image_With_Border_Radius',
  },
]);
</script>

<style lang="scss" scoped>
.section-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 0.785;

  &--with-border-radius {
    border-radius: 24px;

    @media screen and (min-width: 1200px) {
      border-radius: 32px;
    }
  }

  &__element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;

    &--highlighted {
      opacity: 0;
    }
  }
}
</style>
