<script setup lang="ts">
import { templateRegistry } from '#layers/registry'
import type { PageDataTemplate } from '#layers/types/api/pageData'

const props = defineProps<{ templates: PageDataTemplate[] }>()
const registry = templateRegistry as Record<string, { component: any }>

const isShowTemplate = (template: PageDataTemplate) => {
  return template?.components && Object.keys(template.components).length > 0
}
</script>

<template>
  <main>
    <template
      v-for="(template, index) in props.templates"
      :key="template.template_code ?? index"
    >
      <component
        :is="registry[template.template_code]?.component"
        v-if="isShowTemplate(template)"
        :components="template.components"
      />
    </template>
  </main>
</template>
