<template>
	<div class="pages-setting">
		<div class="title flex items-center before:w-[3px] before:h-[14px] before:block before:bg-primary before:mr-2">
			{{ widget?.title }}
		</div>
		<keep-alive>
			<component class="pt-5 pr-4" :is="widgets[widget?.name]?.attr" :content="widget?.content" :styles="widget?.styles" :type="type" />
		</keep-alive>
	</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue';
import widgets from '../widgets';

defineProps({
	widget: {
		type: Object as PropType<Record<string, any>>,
		default: () => ({}),
	},
	type: {
		type: String as PropType<'mobile' | 'pc'>,
		default: 'mobile',
	},
});
</script>
