<script setup>
import { RouterView } from "vue-router";
import Navbar from "./components/navbar/Navbar.vue";
import useUserInfoStore from "@/stores/useUserInfoStore";
import { ref, provide, onUnmounted, onMounted } from "vue";

const store = useUserInfoStore();
let isToastOpen = ref({
  open: false,
  content: "",
  status: "info",
  to: "body",
});
const cancelToastOpen = () => {
  isToastOpen.value = {
    open: false,
    content: "",
  };
};

const openToast = (status, content, to = "body") => {
  isToastOpen.value = {
    open: true,
    content,
    status,
    to,
  };
};
provide("app_toast", { openToast });
</script>

<template>
  <Toast
    :content="isToastOpen.content"
    :open="isToastOpen.open"
    :status="isToastOpen.status"
    :cancel="cancelToastOpen"
    :to="isToastOpen.to"
  />
  <div v-if="store.user.token" class="min-h-screen">
    <Navbar />
    <div class="px-8 w-full relative app-container">
      <RouterView />
    </div>
  </div>
  <div v-else class="min-h-screen"><RouterView /></div>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 1rem;
}
</style>
