<template>
  <div class="max-w-[1640px] md:px-[120px] mx-auto w-full">
    <div class="max-md:mx-[30px] 1xl:mx-0 bg-navy-25 rounded-[48px] p-16">
      <div v-for="(component, index) in section.components">
        <component
            :is="currentComponent(component)"
            :key="index"
            :component="component"
        ></component>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, markRaw } from "vue";
import VHeaderPresenter from "@/components/presenters/components/HeaderPresenter.vue";
import VVerticalTabPresenter from "@/components/presenters/components/VerticalTabPresenter.vue";

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

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

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

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

</script>