<template>
  <component :is="computedComponent.is" v-bind="computedComponent.props" />
</template>

<script setup lang="ts">
import type { RichText } from './Types'

type Props = {
  element : RichText
}

const { element } = defineProps<Props>()

const computedComponent = computed(() => {
  let is : ReturnType<typeof resolveComponent> = {}

  switch (element.type) {
    case 'plain':
      is = resolveComponent('RichTextPlain')
      break
    case 'p':
      is = resolveComponent('RichTextParagraph')
      break
    case 'span':
      is = resolveComponent('RichTextString')
      break
    case 'a':
      is = resolveComponent('RichTextLink')
      break
    case 'br':
      is = resolveComponent('RichTextNewLine')
      break
    default:
      break
  }

  return { is, props: { ...element } }
})

</script>
