<script setup>
import { ref } from "vue";
import Logo from "./Logo.vue";
import { currentUser } from "../auth.js";

// make ref for title
const title = ref("");
const username = ref(currentUser);

// change title dynamically based on emit
const changeTitle = (text) => {
  title.value = text;
};
</script>

<template>
  <nav class="flex items-center justify-between w-full border-b">
    <Logo />
    <div class="grow flex justify-center text-2xl">
      {{ title }}
    </div>
    <router-link :to="`/user/${username}`">
      <div
        class="h-[4rem] w-[8rem] px-5 flex justify-center items-center border-l hover:bg-zinc-100 hover:text-zinc-700"
      >
        <h1 class="text-lg">&#129399; {{ username }}</h1>
      </div>
    </router-link>
  </nav>
  <div class="h-full flex justify-center">
    <router-view @title="(title) => changeTitle(title)"></router-view>
  </div>
</template>
