<script setup lang="ts">
import {onMounted, ref, provide, computed} from 'vue'
import {fetchPageConfig} from './api'
import {PageConfig} from "./types";
import ImageSwiper from "./components/ImageSwiper.vue";
import HotArea from "./components/HotArea.vue";

const props = defineProps<{
  id: string
  pageConfig?: PageConfig
  debugMode?: boolean
}>()

const debugMode = computed(() => props.debugMode)

provide('debugMode', debugMode)
</script>

<template>
  <view v-if="pageConfig" class="page-render-engine">
    <template v-for="(component, index) in pageConfig.components" :key="'comp-' + index">
      <HotArea
        v-if="component.name === 'HotArea'"
        :properties="component.props"
      />
    </template>
  </view>
</template>

<style scoped lang="less">
.page-render-engine {
  background-repeat: no-repeat;
}
</style>