<template>
  <div class="navbar">
    <div class="navbar-start">
      <div v-if="false" class="dropdown">
        <button class="btn btn-ghost btn-circle" @click="toggleDrawer">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /> </svg>
        </button>
      </div>
    </div>

    <div class="navbar-center">
      <RouterLink :to="{name: 'home'}" class="font-medium text-xl flex items-center">
        <div class="mr-2">
          <div v-if="settings.app_icon" class="max-h-10">
            <img :src="settings.app_icon" class="max-h-10" :alt="settings.app_name"/>
          </div>
        </div>

        {{ settings.app_name }}
      </RouterLink>
    </div>

    <div class="navbar-end">
      <div v-if="tgData?.user?.photo_url" class="avatar">
        <div class="w-8 h-8 rounded-full">
          <img :src="tgData?.user?.photo_url" alt="avatar"/>
        </div>
      </div>

      <div v-else class="avatar avatar-placeholder">
        <div class="bg-primary text-primary-content w-8 rounded-full">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useSettingsStore} from "@/stores/SettingsStore.js";
import {useMiniApp} from "vue-tg";
import {ref} from "vue";
import {useTgData} from "@/composables/useTgData.js";

const settings = useSettingsStore();
const emits = defineEmits(['drawer']);

const tgData = useTgData();

function toggleDrawer() {
  emits('drawer');
}
</script>
