<script setup lang="ts">
import { computed } from "vue";
import CommonLayout from "@/views/CommonLayout.vue";
import { goodsConfig } from "@/config";
import AddressTheme1 from "@/components/address/AddressTheme1.vue";
import AddressTheme2 from "@/components/address/AddressTheme2.vue";

const currentThemeComponent = computed(() => {
  const addressTheme = goodsConfig.value.addressTheme;
  const fallbackTheme = goodsConfig.value.homeTheme;
  const themeId = addressTheme || (fallbackTheme === 2 ? 2 : 1);

  const themeMap: Record<string, any> = {
    "1": AddressTheme1,
    "2": AddressTheme2,
  };

  return themeMap[themeId] || AddressTheme1;
});
</script>

<template>
  <CommonLayout>
    <template #default>
      <component :is="currentThemeComponent" />
    </template>
  </CommonLayout>
</template>

<style scoped>
/* Styles are owned by each address theme component. */
</style>
