<template>
  <div class="rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
    <div v-if="section.hasOwnProperty('components') > 0 && section.components.length > 0"
         class="md:px-[90px]"
         :class="{'flex flex-col items-center text-center': headerComponent?.center, 'mb-[64px]': hasFeaturedImage}">
      <div class="bg-navy-50 rounded-[48px] relative pt-[164px] px-[120px]" :class="{'flex flex-col items-center text-center': headerComponent?.text_center}">
        <h3 class="text-[48px] font-semibold text-gray-900 w-full max-w-[800px] leading-[60px] tracking-[-1px]">{{ headerComponent.title }}</h3>
        <h3 class="text-xl font-normal text-gray-600 mt-3 w-full max-w-[800px]" :class="{'pb-[100px]': !hasFeaturedImage}">{{ headerComponent.supporting_text }}</h3>
        <div class="flex gap-3 mt-8 flex-col lg:flex-row"
             v-if="headerComponent?.secondary_button?.show || headerComponent?.primary_button?.show">
          <a class="text-gray-700 text-base font-semibold border border-gray-300 px-6 py-2 rounded-full hover:border-gray-400"
             :href="formatUrl(headerComponent.secondary_button.url)"
             v-if="headerComponent.secondary_button.show"
             :target="headerComponent.secondary_button.open_in_new_tab ? '_blank' : ''">
            <span>{{ headerComponent.secondary_button.label }}</span>
          </a>
          <a class="bg-brand-600 hover:bg-brand-800 text-white h-[40px] rounded-full px-[14px] py-[10px] inline-flex gap-1.5 items-center shadow-xs text-base"
             :href="formatUrl(headerComponent.primary_button.url)"
             v-if="headerComponent.primary_button.show"
             :target="headerComponent.primary_button.open_in_new_tab ? '_blank' : ''">
            {{ headerComponent.primary_button.label }}
            <ArrowDownRight class="w-5 h-5" />
          </a>
        </div>
        <img
            v-if="hasFeaturedImage"
            :src="section.components[0]?.featured_image"
            alt="Card Image"
            class="w-full max-w-[1632px] h-[480px] object-cover rounded-[48px] relative top-[64px]"
        />
      </div>
    </div>
  </div>
</template>

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

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

const section = ref(props.section);
const headerComponent = computed(() => {
  return section.value?.components[0];
});
const hasFeaturedImage = computed(() => {
  return section.value?.components[0]?.hasOwnProperty('featured_image');
});

</script>