<script setup lang="ts">
import type { AcfBuilderFragment } from "#graphql/types";

const props = defineProps<{ builder: AcfBuilderFragment }>();
const sections = computed(() =>
  props.builder.sections.map(({ __typename, ...section }) => ({
    component: __typename.replace(/^GroupAbstractBuilderSections(.+?)Layout$/, "Section$1"),
    section,
  })),
);
</script>

<template>
  <Component
    v-for="({ component, section }, key) in sections"
    :key="key"
    :is="component"
    :section="section"
  />
</template>
