<script setup lang="ts">
import { toRefs, ref } from 'vue'
import {
  loadComponent,
} from '@/helper'
import LoadingSpinner from '@/apps/settings/components/LoadingSpinner.vue'

const props = defineProps({
  params: {
    type: Object,
    required: true,
  },
})
const { params } = toRefs(props)
const arg = params.value
const classes = ref<string>(arg['classes'])
const fields = ref<any>(arg['fields'])
</script>

<template>
  <div :class="classes">
    <Suspense>
      <component
        :is="loadComponent(field['type'])"
        v-for="(field, fieldkey) in fields"
        :key="fieldkey"
        :params="field"
      />
      <!-- loading state -->
      <template #fallback>
        <loading-spinner />
      </template>
    </Suspense>
  </div>
</template>