<script setup lang="ts">
import type { BuilderSectionsFragment } from "#graphql/typed-documents";

const props = defineProps<BuilderSectionsFragment>();
const sections = computed(() => {
  return (props.sections || [])
    .filter((section) => !!section)
    .map(({ __typename, ...attrs }) => ({
      componentName: __typename.replace(/^GroupAbstractBuilderSections(.+?)Layout$/, "Section$1"),
      attrs,
    }));
});
</script>

<template>
  <div id="builder-sections">
    <Component
      :is="componentName"
      v-for="({ componentName, attrs }, index) in sections"
      :key="index"
      v-bind="attrs"
    />
  </div>
</template>
