<script setup lang="ts">
import { useTemplateRegistry } from "#layers/composables/useTemplateRegistry";
import type { PageDataTemplate } from "#layers/types/api/pageData";

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

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

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