<script setup>
import useUserInfoStore from "@/stores/useUserInfoStore";
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router';

const router = useRouter();
const store = useUserInfoStore();
const user = ref("");

function logout() {
  router.push('/logout');
}

onMounted(() => {
  const name = store.user.user_name;
  if (name) {
    user.value = name;
  }
});
</script>

<template>
  <div class="dropdown dropdown-bottom dropdown-end">
    <button
      tabindex="0"
      type="link"
      class="flex flex-col justify-center items-center btn-group text-white text-center"
    >
      <font-awesome-icon
        :icon="['fas', 'user-circle']"
        class="text-lg lg:text-2xl mb-1"
      />
      <span class="text-xs lg:text-sm block"> {{ user || "webUser" }}</span>
    </button>
    <ul
      tabindex="0"
      class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-32 bg-[#4c625e] border text-center"
    >
      <li class="text-white">
        <a
          type="button"
          class="flex flex-col justify-center items-center"
          @click="logout"
          >{{ $t("sign_out") }}
        </a>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped></style>
