<template>
  <div class="overflow-hidden">
    <div class="pb-container bg-white py-[40px] flex flex-col lg:flex-row gap-8 xl:gap-[10%]">
      <div v-for="(header, index) in headerComponents" class="gap-4 w-full" :class="{'lg:w-1/2': section.two_columns}">
        <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="header">
          <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ header.title }}</h3>
          <p v-if="header?.supporting_text" class="text-[20px] font-normal mt-2 text-gray-600 leading-[30px] max-w-[768px] mx-auto" v-html="header.supporting_text"></p>
        </div>
        <img v-if="header?.featured_image"
             :src="header?.featured_image"
             class="rounded-xl md:rounded-3xl w-full h-[300px] lg:h-[480px] object-cover mb-6"
             alt="Feature"/>
        <div v-if="linkComponents[index]" class="flex w-full">
          <div :class="{'grid lg:grid-cols-2 gap-x-[100px] w-full': !section.two_columns, 'flex flex-col gap-4 w-full': section.two_columns}">
            <div v-for="(link, index) in linkComponents[index].data" class="relative bg-white hover:bg-gray-100 p-2 rounded-lg w-full">
              <a
                  v-if="link.url"
                  class="text-gray-900 w-full inline-flex justify-between gap-1.5 items-center leading-[28px] font-semibold text-lg hover:underline"
                  :href="formatUrl(link.url)"
                  :target="link.open_in_new_tab ? '_blank' : ''">
                <div class="flex gap-4 items-center max-w-[94%] w-full">
                  <LinkExternal class="w-5 h-5"></LinkExternal>
                  <span class="w-full">{{ link.title }}</span>
                </div>
                <ArrowUpRight class="w-5 h-5"></ArrowUpRight>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref, computed} from "vue";
import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
import LinkExternal from "@/assets/img/icons/link-external-01.svg";
import { formatUrl } from "@/components/helpers/common";

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

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

const linkComponents = computed(() => {
  return section.value.components.filter((component) => component.type === "links");
});

</script>