<template>
  <div v-if="mobile">
    <v-app-bar
      id="top"
      elevation="6"
      height="60"
      class="main-head pl-2"
    >
      <div class="mr-3">
        <PublicAppLogo to="/" />
      </div>

      <v-spacer />

      <ProfileMenu v-if="isAuthenticated" />
      <v-btn
        v-else
        color="primary"
        variant="tonal"
        text="Sign in"
        :to="{ name: 'SignInPage' }"
      />
    </v-app-bar>
  </div>
  <div v-else>
    <v-app-bar
      id="top"
      elevation="6"
      height="60"
      class="main-head pl-2"
    >
      <div class="mr-3">
        <PublicAppLogo to="/" />
      </div>

      <v-spacer />

      <ProfileMenu v-if="isAuthenticated" />
      <v-btn
        v-else
        color="primary"
        variant="tonal"
        text="Sign in"
        :to="{ name: 'SignInPage' }"
      />
    </v-app-bar>
  </div>
</template>

<script setup lang="ts">
import { useDisplay } from "vuetify"
import { useAuth0 } from "@auth0/auth0-vue"

import ProfileMenu from "@/components/layout/ProfileMenu.vue"
import PublicAppLogo from "@/components/common/PublicAppLogo.vue"

const { mobile } = useDisplay()
const { isAuthenticated } = useAuth0()
</script>
