<template>
  <div class="mx-auto px-4 h-14">
    <div class="flex justify-between items-center h-full">
      <figure>
          <DspLogo />
      </figure>
      <div class="flex justify-between items-center" v-show="showMember">
        <button class="btn btn-sm btn-neutral mr-2" @click.prevent="logOut">
          log out
        </button>
        <!-- <figure>
          <router-link :to="'/member-area'">
            <IconMember class="w-8 h-8 fill-neutral-500"/>
          </router-link>
        </figure> -->
      </div>
    </div>
  </div>
</template>

<script>
import loginStore from '@/stores/login.js';
import DspLogo from '@/components/icons/DspLogo.vue';
import IconMember from '@/components/icons/IconMember.vue';

export default {
  data() {
    return {
      showMember: false,
    }
  },
  setup() {
    const store = loginStore();
    const { logOut } = store;

    return {
      logOut,
    }
  },
  components: {
    DspLogo,
    IconMember
  },
  mounted() {
    this.$route.name === 'Login' || this.$route.name === 'NotFound404' ? this.showMember = false : this.showMember = true;
  }
}

</script>
