<script setup>
import { defineAsyncComponent } from 'vue'

const size375 = defineAsyncComponent(() => import("@/views/stock-quote/index.vue"));
const size768 = defineAsyncComponent(() => import("@/views/stock-quote/index.vue"));
const size1440 = defineAsyncComponent(() => import("@/views/stock-quote/index.vue"));
const size1920 = defineAsyncComponent(() => import("@/views/stock-quote/index.vue"));

const { viewComponent, componentKey } = useViewSelector({
  size375,
  size768,
  size1440,
  size1920,
});

const bg = usePageBackground("bg-stock-quote.png");

definePageMeta({
  layout: "default",
});

// Set background dynamically via route meta
const route = useRoute();
watch(
  bg,
  (newBg) => {
    if (route.meta) {
      route.meta.bg = newBg;
    }
  },
  { immediate: true }
);

useSeoMeta({
  title: "Stock Quote | Real-time Share Price | FiEE",
  description:
    "Monitor FiEE's real-time stock price, interactive charts, and historical market data.",
  ogTitle: "FiEE Stock Quote",
});
</script>

<template>
  <component :is="viewComponent" :key="componentKey" />
</template>
