<script setup lang="ts">
import { computed } from "vue";
import CommonLayout from "@/views/CommonLayout.vue";
import { goodsConfig } from "@/config";
import CardTheme1 from "@/components/card/CardTheme1.vue";
import CardTheme2 from "@/components/card/CardTheme2.vue";

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

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

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

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

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