<template>
  <div class="body-content">
    <SanityContent :blocks="content" :serializers="serializers" :renderContainerOnSingleChild="'section'"/>
  </div>
</template>


<script setup>
  import AnnotatedVisual from '~/components/block/section/AnnotatedVisual.vue';
  import Gallery from '~/components/block/section/Gallery.vue';
  import Testimonial from '~/components/block/section/Testimonial.vue';
  import Videos from '~/components/block/section/Videos.vue';
  import TextOverVisual from '~/components/block/section/TextOverVisual.vue';
  import Link from '~/components/Link.vue';
  // import Block from '~/components/block/section/Block.vue';
  import Subscribe from '~/components/block/section/Subscribe.vue';
  import Articles from '~/components/block/section/Articles.vue';
  import CaseStudies from '~/components/block/section/CaseStudies.vue';
  import Excerpts from '~/components/block/section/Excerpts.vue';

  const props = defineProps({
    content:{required:true,type:Array}
  })

  const serializers = {
    container: 'section',
    types: {
      gallery:Gallery,
      annotatedVisual:AnnotatedVisual, // the component I need to get the index for
      testimonial:Testimonial,
      videos:Videos,
      textOverVisual:TextOverVisual,
      articles:Articles,
      caseStudies:CaseStudies,
      subscribe:Subscribe,
      excerpts:Excerpts
      // block:Block
    },
    marks: {
      link: Link,
    },
  }
</script>