<script setup>
const route = useRoute();

definePageMeta({
  layout: false,
  name: "hadithPublicPage",
});
useHead({
  name: "hadithPublicPage",
  title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | در باره حدیثا`,
  meta: [
    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
  ],
  bodyAttrs: {
    class: import.meta.env.VITE_HADITH_SYSTEM,
  },
});
const componentName = ref("");

// components declaration
const HadithLayout = defineAsyncComponent(() =>
  import("@hadith/layouts/HadithLayout.vue")
);
const NavigationMenu = defineAsyncComponent(() =>
  import("@hadith/components/hadith/NavigationMenu.vue")
);
const AboutUs = defineAsyncComponent(() =>
  import("@hadith/pages/hadith/public-pages/about-us.vue")
);
const ContactUs = defineAsyncComponent(() =>
  import("@hadith/pages/hadith/public-pages/contactus.vue")
);
const Rules = defineAsyncComponent(() =>
  import("@hadith/pages/hadith/public-pages/rules.vue")
);

onMounted(() => {
  console.info(route.path);
  // if (route.path == "/hadith/about-us") componentName.value = "AboutUs";
  // if (route.path == "/hadith/contact-us") componentName.value = "ContactUs";
  // if (route.path == "/hadith/rules") componentName.value = "Rules";
});
</script>

<template>
  <HadithLayout>
    <div class="page-container h-full">
      <!-- max-w-[var(--ui-container-two)] -->
      <UContainer class="page-inner-container sm:px-6 lg:px-4">
        <navigation-menu></navigation-menu>

        <div class="page-header pt-38 pb-4 flex justify-between items-center">
          <div class="flex items-center">
            <h1 class="m-0 title">درباره</h1>
            <NuxtImg
              fit="auto"
              quality="80"
              placeholder
              src="/img/haditha-title.svg"
            />
          </div>
        </div>

        <div class="page-content p-6">
          <ContactUs v-if="route.path == '/hadith/contact-us'"></ContactUs>
          <AboutUs v-if="route.path == '/hadith/about-us'"></AboutUs>
          <Rules v-else-if="route.path == '/hadith/rules'"></Rules>
        </div>
      </UContainer>
    </div>
  </HadithLayout>
</template>

<style scoped>
.page-container {
  background: #f7fffd;

  .page-inner-container {
    .page-header {
      color: var(--ui-color-two);

      .title {
        font-family: IRANSansX;
        font-weight: 300;
        font-size: 24px;
        line-height: 36px;
        letter-spacing: 0%;
        text-align: center;
      }
    }

    .page-content {
      color: var(--ui-color-two);

      p {
        font-family: IRANSansX;
        font-weight: 300;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0%;
        text-align: right;
      }
    }
  }
}
</style>