<template>
  <div class="overflow-hidden">
    <div class="pb-container mt-[40px]"
         :class="{'flex gap-4 lg:gap-8 flex-col lg:flex-row': headerComponent?.featured_image}">
      <div class="lg:max-w-[33.3%] w-full sm:min-h-[320px]"
           v-if="(imageComponent && section?.acknowledgement_style)
           || (headerComponent?.featured_image && !section?.acknowledgement_style)"
      >
        <img v-if="imageComponent && section?.acknowledgement_style"
             :src="imageComponent.featured_image" :alt="imageComponent?.caption ?? 'Image'"
             class="w-[560px] object-cover rounded-xl md:rounded-3xl h-full mx-auto"/>
        <img v-if="headerComponent?.featured_image && !section?.acknowledgement_style"
             :src="headerComponent?.featured_image"
             class="w-[560px] object-cover rounded-xl md:rounded-3xl h-full mx-auto"
             alt="Feature"/>
      </div>

      <div v-if="headerComponent"
           class="rounded-xl md:rounded-3xl flex items-center justify-center flex-col"
           :class="{
        'bg-pale-100 min-h-[320px] w-full': !headerComponent?.featured_image,
         'border border-brand-400 w-full py-8': headerComponent?.featured_image,
         'w-full ': !section?.acknowledgement_style,
         'bg-gray-100 border-none': section?.acknowledgement_style,
      }"
      >
        <h3 class="text-xl text-brand-600 font-semibold px-[56px]">{{ headerComponent.title }}</h3>
        <p v-if="headerComponent?.supporting_text"
           class="mt-2 px-[56px]"
           :class="{'text-normal text-[20px] text-gray-700 leading-[30px]': section?.acknowledgement_style, 'text-[30px] font-semibold text-gray-900 leading-[38px] text-center': !section?.acknowledgement_style}"
           v-html="headerComponent.supporting_text">
        </p>
        <div class="flex gap-1 mt-4">
          <img v-if="headerComponent?.featured_image && section?.acknowledgement_style"
               :src="headerComponent?.featured_image"
               class="h-[96px]"
               alt="Feature"/>
          <img v-if="headerComponent?.featured_image2 && section?.acknowledgement_style"
               :src="headerComponent?.featured_image2"
               class="h-[96px]"
               alt="Feature"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, computed} from "vue";

const props = defineProps({
  section: {
    required: true,
    type: Object,
  },
});

const section = ref(props.section);
const headerComponent = computed(() => {
  return section.value.components.find((component) => component.type === "callout");
});
const imageComponent = computed(() => {
  return section.value.components.find((component) => component.type === "image_block");
});
</script>