<template>
  <div class="rounded-3xl md:rounded-[48px] 1xl:max-w-[1872px] mx-auto w-full sm:px-4 md:px-6">
    <div v-for="(component, index) in section.components">
      <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>