<template>
  <UApp>
    <NuxtLoadingIndicator />
    <!-- <NuxtRouteAnnouncer /> -->
    <!-- <DevOnly> -->
    <!-- this component will only be rendered during development -->
    <!-- <LazyDebugBar /> -->

    <!-- if you ever require to have a replacement during production -->
    <!-- be sure to test these using `nuxt preview` -->
    <!-- <template #fallback> -->
    <!-- <div>empty div for flex.justify-between</div> -->
    <!-- </template> -->
    <!-- </DevOnly> -->

    <NuxtLayout>
      <!-- this component will be rendered on client-side -->
      <!-- <NuxtClientFallback
        fallback-tag="span"
        fallback="NuxtClientFallback"
        @ssr-error="logSomeError"
      > -->
      <NuxtPage />
      <!-- <BrokeInSsr /> -->
      <!-- </NuxtClientFallback> -->
    </NuxtLayout>
  </UApp>
</template>

<script>
// import { useCounterStore } from "~/stores/counter";
// import { storeToRefs } from "pinia";

export default {
  // setup() {
  //   definePageMeta({
  //     colorMode: "light",
  //   });
  // },
  mounted() {
    // access the `store` variable anywhere in the component ✨
    // const store = useCounterStore();
    // const { count, doubleCount } = storeToRefs(store);
    // const { increment } = store;
    // console.info(this.$config.public.TAHRIR_ASSETS_URL);
    // console.info(this.$config.public.PUBLIC_JAHAT_ASSETS_URL);
    // console.info(this.$config.public.VITE_APP_NAME);
    // console.info(import.meta.env.VITE_APP_NAME);
    // console.info(this.$config.public);
    // console.info(this.$config.public.TITLE);
    // console.info(this.$config.public.NODE_ENV);
    // console.info(this.$config.public.VITE_APP_NAME);
    // console.info(this.$config.public.VITE_BASE_URL);
    // console.info(this.$config.public.VITE_BASE_URL);
  },
  methods: {
    logSomeError(error) {
      console.info("logSomeError", error);
    },
  },
};
</script>

<!-- using scss -->
<!-- <style lang="scss"> -->
<!-- // @use "~/assets/scss/main.scss"; -->
<!-- </style> -->

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}

.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
  filter: grayscale(1);
}
</style>
