<template>
  <div class="w-full bg-navy-800 max-md:px-4 py-4 md:py-10 relative xl:h-[336px]" :class="{'lg:!h-[266px]' : section?.as_cta}">
    <LeftVector class="absolute left-0 top-0 h-full max-w-full" v-if="section?.as_cta"></LeftVector>
    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
      <div class="relative z-10" :class="{'text-center flex flex-col items-center': section?.as_cta}">
        <div v-for="(component, index) in section.components" class="w-full md:w-3/4">
          <component
              :is="currentComponent(component)"
              :key="index"
              :component="component"
              :class="{'flex !justify-center': section?.as_cta}"
          ></component>
        </div>
      </div>
    </div>
    <HeaderVector class="absolute right-0 top-0 max-xl:h-full" v-if="!section?.as_cta"></HeaderVector>
   </div>
</template>

<script setup>
import { ref, markRaw } from "vue";
import VLinkPresenter from "@/components/presenters/components/LinkPresenter.vue";
import VHeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
import HeaderVector from "@/assets/svg/header_right_vector.svg";
import LeftVector from "@/assets/svg/left_vector.svg";

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

const section = ref(props.section);
const componentMaps = ref({
  header: markRaw(VHeaderPresenter),
  link_grid: markRaw(VLinkPresenter),
});

const currentComponent = (component) => {
  if (!component?.type) {
    return '';
  }

  return componentMaps.value[component?.type];
};

</script>