<template>
  <div class="overflow-hidden">
    <div :class="{'bg-gray-50 py-2 my-6' : section?.has_background, 'my-8': section?.margin}">
      <div class="max-w-[1640px] md:px-[120px] mx-auto w-full my-[40px]"
           :class="{'flex gap-8': headerComponent?.featured_image, 'flex-row-reverse justify-between': headerComponent?.revert}">
        <img v-if="headerComponent?.featured_image"
             :src="headerComponent?.featured_image"
             class="max-w-[480px] w-full object-cover rounded-[24px]"
             ref="leftColumn"
             alt="Feature"/>
        <div v-if="headerComponent" class="h-fit" :class="{'py-[48px]': headerComponent?.featured_image, 'grid grid-cols-2 gap-8': section?.two_column}"
             ref="rightColumn">
          <div>
            <div v-if="headerComponent?.icon"
                 class="w-[48px] h-[48px] bg-brand-100 border-[8px] border-brand-50 rounded-full flex items-center justify-center">
              <IconComponent :icon="headerComponent.icon" icon-classes="w-5 h-5 text-brand-600"></IconComponent>
            </div>
            <h3 class="text-[36px] text-gray-900 font-semibold">{{ headerComponent.title }}</h3>
            <p v-if="headerComponent?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px]"
               v-html="headerComponent.supporting_text"></p>
          </div>
          <div v-for="bullet in bulletPointsComponents" class="mt-8">
            <p v-if="bullet?.title" v-text="bullet.title" class="font-semibold text-[20px] mb-4"></p>
            <div class="flex flex-col gap-4"
                 :class="{'!grid grid-cols-3' :!headerComponent?.featured_image && !section?.two_column}">
              <div v-for="item in bullet.data" class="flex">
                <div
                    class="bg-gray-100 rounded-full w-[28px] h-[28px] flex items-center justify-center text-gray-500 mr-2">
                  <CheckIcon class="w-4 h-4"></CheckIcon>
                </div>
                <p class="text-lg text-gray-600 w-[97%]">{{ item.title }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, computed, onMounted} from "vue";
import CheckIcon from "@/assets/img/icons/check.svg";
import IconComponent from "@/components/common/Icon.vue";

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

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

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

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