<script setup lang="ts">
import { ref, markRaw, Raw, onMounted } from 'vue'
import {
  getParamValue,
  getPagesAsyncComponent,
} from '@/helper'

const layout: Raw<any> = ref(null)
const page = getParamValue('page')

onMounted(() => {
  if (page === 'save-to-wishlist-about') {
    layout.value = markRaw(getPagesAsyncComponent('components/About.vue'))
  } else if (page === 'save-to-wishlist-help') {
    layout.value = markRaw(getPagesAsyncComponent('components/Help.vue'))
  } else if (page === 'save-to-wishlist-analytics') {
    layout.value = markRaw(getPagesAsyncComponent('components/Analytics.vue'))
  } else if (page === 'save-to-wishlist-automations') {
    layout.value = markRaw(getPagesAsyncComponent('components/Automations.vue'))
  } else if (page === 'save-to-wishlist-license') {
    layout.value = markRaw(getPagesAsyncComponent('components/License.vue'))
  }
})
</script>

<template>
  <div class="stwlite-tw-bg-gray-50">
    <component :is="layout" />
  </div>
</template>
