<template>
  <div class="flex flex-wrap justify-center lg:min-h-[136px] w-full relative rounded-b-3xl lg:rounded-b-[48px] bg-navy-600
              -mt-6 lg:-mt-12 pt-12 sm:pt-10 md:pt-12 max-sm:pb-4 max-lg:pb-6 px-4 gap-8 lg:gap-y-2 lg:gap-x-[60px]"
       :class="{'bg-transparent !justify-start !mt-0 !h-auto !gap-4 !px-0 max-lg:!pb-0 max-md:!pt-4': isLinkGrid}"
  >
    <div class="flex justify-center items-center max-w-full" :class="{'!block': isLinkGrid}" v-for="link in component.data">
      <a
          :target="link.open_in_new_tab ? '_blank' : ''"
          :href="link.url.startsWith('http') ? link.url : `//${link.url}`"
          class="text-white flex gap-1.5 items-center cursor-pointer text-sm font-semibold hover:text-gray-300"
          :class="{'bg-white border border-gray-300 rounded-full !text-gray-700  px-4 py-2 h-auto w-max max-w-full !mt-0 !text-base hover:bg-gray-100': isLinkGrid}"
      >
        <span>{{ link.title }}</span><ArrowUpRight class="shrink-0 w-5 h-5"></ArrowUpRight>
      </a>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import ArrowUpRight from '@/assets/img/icons/arrow-up-right.svg';

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

const component = ref(props.component);
const isLinkGrid = component.value.type === 'link_grid';
</script>