<template>
  <div class="link-card overflow-hidden" :class="{'bg-aqua-100 mb-6': !section?.no_background}">
    <div class="pb-container my-[40px]">
      <div class="rounded-xl px-[40px] text-center mb-6 max-w-[1280px] mx-auto" v-if="headerComponent">
        <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900">{{ 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 flex-col md:flex-row 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="gap-8 w-full" ref="rightColumn"
             :class="`${headerComponent?.featured_image ? 'link-card__columns--with-featured-image flex' : 'grid'} ${'link-card__columns--'+ cardComponent.data.length}`"
        >
          <div v-for="(data, index) in cardComponent.data"
               class="relative bg-white p-8 rounded-xl md:rounded-3xl 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 cursor-pointer"
                :download="data.primary_button.type === 'download' ? (data.primary_button.label || '') : null"
                @click.prevent="onLinkClick(data.primary_button, $event)"
            >
              <span>{{ data.primary_button.label }}</span>
              <ArrowUpRight v-if="data.primary_button.type !== 'download'" class="shrink-0 w-5 h-5"></ArrowUpRight>
              <Download v-else class="shrink-0 w-5 h-5"></Download>
            </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 {onLinkClick} from "@/components/helpers/common";
import Download from "@/assets/img/icons/download-01.svg";

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>

<style scoped>
.link-card {
  &__columns {
    &--2 {
      @apply sm:grid-cols-2;
    }
    &--3 {
      @apply md:grid-cols-3;
    }
    &--4 {
      @apply sm:grid-cols-2 lg:grid-cols-4;
    }

    &--with-featured-image {
      @apply flex-col h-fit;

      &.link-card__columns{
        &--2 {
          @apply grid-cols-1 lg:grid-cols-2;
        }
        &--3 {
          @apply grid-cols-1 xl:grid-cols-3;
        }
        &--4 {
          @apply grid-cols-1 lg:grid-cols-2 xl:grid-cols-4;
        }
      }
    }
  }
}
</style>