<template>
  <div class="rounded-[48px] 1xl:max-w-[1824px] mx-auto w-full">
    <div v-for="(component, index) in section.components" class="md:px-[90px]">
      <component
          :is="currentComponent(component)"
          :key="index"
          :component="component"
      ></component>
    </div>
  </div>
</template>

<script setup>
import { ref, markRaw } from "vue";
import VSliderPresenter from "@/components/presenters/components/SliderPresenter.vue";
import VLinkPresenter from "@/components/presenters/components/LinkPresenter.vue";

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

const section = ref(props.section);
const componentMaps = ref({
  sliders: markRaw(VSliderPresenter),
  links: markRaw(VLinkPresenter),
});

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

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

</script>