<template>
  <div class="pb-container">
    <div class="bg-navy-25 rounded-3xl md:rounded-[48px] py-6 px-4 lg:p-16 text-center">
      <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>