<template>
  <div class="flex justify-center h-[136px] w-full relative rounded-b-[48px] bg-navy-600 -mt-12 gap-[60px]" :class="{'bg-transparent !justify-start flex-wrap mt-8 !h-auto !gap-4': isLinkGrid}">
    <div class="flex justify-center" :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 mt-12 text-sm font-semibold hover:text-gray-300"
          :class="{'bg-white border border-gray-300 rounded-full !text-gray-700  px-4 h-[44px] w-max !mt-0 !text-base hover:bg-gray-100': isLinkGrid}"
      >
        <span>{{ link.title }}</span><ArrowUpRight class="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>