<template>
  <div class="overflow-hidden" :class="{'bg-aqua-100 mb-6': !section?.no_background}">
    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]">
      <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="headerComponent">
        <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
        <div v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="headerComponent.supporting_text"></div>
      </div>
      <div v-if="cardComponent" class="flex w-full" :class="{'gap-8': headerComponent?.featured_image}">
        <div class="w-full" ref="leftColumn" v-if="headerComponent?.featured_image">
          <img
               :src="headerComponent?.featured_image"
               class="rounded-br-[24px] rounded-tl-[24px] h-full w-full object-cover"
               alt="Feature"/>
        </div>
        <div class="flex gap-8 w-full" ref="rightColumn" :class="{'flex-col h-fit': headerComponent?.featured_image}">
          <div v-for="(data, index) in cardComponent.data"
               class="relative bg-white p-8 rounded-[24px] w-full"
               :class="{'!bg-gray-50': section?.no_background}">
            <div v-if="data.icon" class="w-[48px] h-[48px] flex justify-center items-center rounded-[10px] text-white bg-aqua-900 mb-4">
              <IconComponent :icon="data.icon" icon-classes="w-5 h-5" :key="index"></IconComponent>
            </div>
            <h1 class="text-[20px] font-semibold text-gray-900">{{ data.title }}</h1>
            <div class="text-lg text-gray-600 mt-2 leading-[24px]" v-if="data?.description" v-html="data.description"></div>
            <a
                v-if="data?.primary_button.show && data.primary_button.url"
                class="text-brand-700 inline-flex gap-1.5 items-center font-semibold text-base mt-4"
                :href="formatUrl(data.primary_button.url)"
                :target="data.primary_button.open_in_new_tab ? '_blank' : ''">
              {{ data.primary_button.label }}
              <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
import IconComponent from "@/components/common/Icon.vue";
import { formatUrl } from "@/components/helpers/common";

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

const section = ref(props.section);
const headerComponent = computed(() => {
  return section.value.components.find((component) => component.type === "header");
});
const cardComponent = computed(() => {
  return section.value.components.find((component) => component.type === "link_cards");
});

const leftColumn = ref(null);
const rightColumn = ref(null);

onMounted(() => {
  if (leftColumn.value && rightColumn.value) {
    leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
  }
});
</script>