<template>
  <div class="overflow-hidden">
    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-[40px]" :class="{'!pt-0': section.hasOwnProperty('padding_top') && !section?.padding_top}">
      <template v-for="(component, index) in section.components" :key="index">
        <component
            :is="currentComponent(component)"
            :component="component"
        ></component>
      </template>
    </div>
  </div>
</template>

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

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

const section = ref(props.section);
const componentMaps = ref({
  header: markRaw(HeaderPresenter),
  news_grid: markRaw(CollectionGridPresenter),
  video_grid: markRaw(CollectionGridPresenter),
});

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

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

</script>