<template>
  <div class="overflow-hidden">
    <div :class="{'bg-gray-50 py-2 my-6' : section?.has_background, 'my-8': section?.margin}">
      <div class="pb-container my-[40px]"
           :class="{'flex gap-8 flex-col lg:flex-row': headerComponent?.featured_image, 'flex-col-reverse lg:flex-row-reverse justify-between': headerComponent?.revert}">
        <div v-if="headerComponent?.featured_image"
             ref="leftColumn"
             class="w-full lg:max-w-[480px] rounded-xl md:rounded-3xl overflow-hidden shrink-0 relative max-lg:pt-[55%]"
        >
            <img :src="headerComponent?.featured_image"
                 class="w-full h-full object-cover max-lg:absolute inset-0"
                 alt="Feature"/>
        </div>
        <div v-if="headerComponent" class="h-fit flex flex-col gap-4 lg:gap-8" :class="{'xl:py-[48px]': headerComponent?.featured_image, '[&]:grid lg:grid-cols-2': 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-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ 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">
            <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 sm:grid-cols-2 lg: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 && window.innerWidth >= 1024) {
    leftColumn.value.style.height = `${rightColumn.value.offsetHeight}px`;
  }
});
</script>
