<script setup lang="ts">
import { storeToRefs } from "pinia";
import { usePageDataStore } from "#layers/stores/usePageDataStore";
import Section from "#layers/components/molecules/Section.vue";

const pageDataStore = usePageDataStore();
const { pageData } = storeToRefs(pageDataStore);

// const layout = pageData.value?.meta?.layout ?? "default";
const layout = "default"; // 기본 레이아웃 사용

// definePageMeta를 사용하여 레이아웃을 미리 설정
watchEffect(() => {
  if (pageData.value?.meta_tag) {
    useSeoMeta({
      title: pageData.value.meta_tag.page_title ?? "",
      description: pageData.value.meta_tag.page_desc ?? "",
      ogTitle: pageData.value.meta_tag.og_title ?? "",
      ogDescription: pageData.value.meta_tag.og_desc ?? "",
      ogImage: pageData.value.meta_tag.og_image ?? "",
      twitterTitle: pageData.value.meta_tag.x_title ?? "",
      twitterImage: pageData.value.meta_tag.x_image ?? "",
      twitterDescription: pageData.value.meta_tag.x_desc ?? "",
    });
  }
});
</script>

<template>
  <NuxtLayout :name="layout">
    <ClientOnly>
      <Section :templates="pageData?.templates ?? []" />
    </ClientOnly>
  </NuxtLayout>
</template>
