<template>
  <div class="w-full h-fit flex flex-col gap-2">
    <div v-for="item in data" :key="item.type" class="contents">
      <h1 v-if="item.type == 'heading' && item?.level == 1" class="w-full">
        <FieldType v-for="child in item.children" :data="child" />
      </h1>
      <h2 v-else-if="item.type == 'heading' && item?.level == 2" class="w-full">
        <FieldType v-for="child in item.children" :data="child" />
      </h2>
      <h3 v-else-if="item.type == 'heading'" class="w-full">
        <FieldType v-for="child in item.children" :data="child" />
      </h3>
      <p v-else-if="item.type == 'paragraph'" class="w-full">
        <FieldType v-for="child in item.children" :data="child" />
      </p>
      <div v-else-if="item.type == 'quote'" class="w-full p-3">
        <p class="p-3 bg-gray-200 border-l-2 border-gray-500">
          <FieldType v-for="child in item.children" :data="child" />
        </p>
      </div>
      <ol
        v-else-if="item.type == 'list'"
        class="w-full"
        :class="item.format == 'unordered' ? 'list-disc' : 'list-decimal'"
      >
        <li v-for="list in item.children" class="ml-6">
          <FieldType v-for="child in list.children" :data="child" />
        </li>
      </ol>
      <NuxtLink
        v-else-if="item.type == 'code'"
        primary
        :to="item.children[0].text.split('->')[0]"
        class="w-fit p-2 px-3 rounded-md mx-auto mt-3"
      >
        {{ item.children[0].text.split("->")[1] }}
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from "vue";
import type ContentField from "../../types/field/content";

defineProps({
  data: Object as PropType<ContentField>,
});
</script>