<template>
  <div class="page-render">
    <div v-for="(section, index) in page.sections">
      <component
          :id="`section-${index}`"
          :is="currentComponent(section)"
          :key="index"
          :section="section"
      ></component>
    </div>
  </div>
</template>
<script setup>
import {ref, markRaw} from "vue";
import HeroHeader from "@/components/presenters/modules/HeroHeader.vue";
import QuickLinks from "@/components/presenters/modules/QuickLinks.vue";
import VTabs from "@/components/presenters/modules/VTabs.vue";
import LogoCloud from "@/components/presenters/modules/LogoCloud.vue";
import CollectionCarousel from "@/components/presenters/modules/CollectionCarousel.vue";
import CollectionGrid from "@/components/presenters/modules/CollectionGrid.vue";
import StandardHeader from "@/components/presenters/modules/StandardHeader.vue";
import Paragraph from "@/components/presenters/modules/Paragraph.vue";
import TwoColumnsImageContent from "@/components/presenters/modules/TwoColumnsImageContent.vue";
import Timeline from "@/components/presenters/modules/Timeline.vue";
import LinkCard from "@/components/presenters/modules/LinkCard.vue";
import LinkList from "@/components/presenters/modules/LinkList.vue";
import BulletPoints from "@/components/presenters/modules/BulletPoints.vue";
import Callout from "@/components/presenters/modules/Callout.vue";
import ContactUs from "@/components/presenters/modules/ContactUs.vue";
import FAQ from "@/components/presenters/modules/FAQ.vue";
import AccordionPricing from "@/components/presenters/modules/AccordionPricing.vue";
import HorizontalTabs from "@/components/presenters/modules/HorizontalTabs.vue";
import TestimonialSlider from "@/components/presenters/modules/TestimonialSlider.vue";

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

const componentMaps = ref({
  paragraph: markRaw(Paragraph),
  standard_header: markRaw(StandardHeader),
  header: markRaw(HeroHeader),
  quick_links: markRaw(QuickLinks),
  tabs: markRaw(VTabs),
  logo: markRaw(LogoCloud),
  collection_carousel: markRaw(CollectionCarousel),
  collection_grid: markRaw(CollectionGrid),
  two_column_image_content: markRaw(TwoColumnsImageContent),
  timeline: markRaw(Timeline),
  link_card: markRaw(LinkCard),
  link_list: markRaw(LinkList),
  bullet_points: markRaw(BulletPoints),
  callout: markRaw(Callout),
  contact_us: markRaw(ContactUs),
  faqs: markRaw(FAQ),
  pricing: markRaw(AccordionPricing),
  horizontal_tabs: markRaw(HorizontalTabs),
  testimonial_slider: markRaw(TestimonialSlider),
});

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

  return componentMaps.value[section?.type];
};
</script>
