<script lang="ts" setup>
import { HomeBasic } from './index';

const _props = defineProps<{
    settings: any
}>()

const definedDynamicPage: Record<string, any> = {
    'Home' : HomeBasic,
    'Article': HomeBasic
}

const getCurrentTemplate = computed(() => {
    return _props.settings && _props.settings.template || '';
});


const GET_PROPS = computed(() => {
    return () => {
        let props : any = {};
        if (_props.settings) {
            for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
                props = {
                    ...props,
                    [key]: value
                }
            }
        }
        return props;
    };
})
</script>

<template>
    <component 
        v-if="definedDynamicPage[getCurrentTemplate]" 
        :is="definedDynamicPage[getCurrentTemplate]" 
        v-bind="{...(GET_PROPS()), settings: _props.settings}"
    >
        <slot />
    </component>
</template>