<template>
  <SharedHero v-if="hero" :data="hero" />
  <div class="container mx-auto py-12 min-h-[50vh]">
    <div v-for="item in content" class="contents">
      <DynamicZoneColumnImageText v-if="item.__component == 'dynamic-zone.column-image-text'" :data="item" />
      <DynamicZoneDualColumnText v-else-if="item.__component == 'dynamic-zone.dual-column-text'" :data="item" />
      <DynamicZoneEmphasiseArticle v-else-if="item.__component == 'dynamic-zone.emphasise-article'" :data="item" />
      <DynamicZoneFullImage v-else-if="item.__component == 'dynamic-zone.full-image'" :data="item" />
      <DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
      <DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
      <SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type SharedHero from "../types/component/sharedHero";
import type { ComponentTypes } from "../types/component/baseComponent";

defineProps({
  hero: Object as PropType<SharedHero>,
  content: Array<ComponentTypes>,
});
</script>
