<template>
  <div
    class="tp-header-main-right d-flex align-items-center justify-content-end"
  >
    <div class="tp-header-login d-none d-lg-block">
      <nuxt-link :href=" authStore.user ? '/profile' : '/login'" class="d-flex align-items-center">
        <div class="tp-header-login-icon">
          <span>
            <SvgUser />
          </span>
        </div>
        <div class="tp-header-login-content d-none d-xl-block">
          <span> {{ authStore.user ? 'Hola, ' + authStore.user.name : 'Hola, inicia sesión' }}</span>
          <h5 class="tp-header-login-title">Tu cuenta</h5>
        </div>
      </nuxt-link>
    </div>
    <div class="tp-header-action d-flex align-items-center ml-50">
      <!-- <div class="tp-header-action-item d-none d-lg-block">
        <nuxt-link href="/compare" class="tp-header-action-btn">
          <svg-compare />
        </nuxt-link>
      </div> -->
      <!-- <div class="tp-header-action-item d-none d-lg-block" v-if="authStore.user">
        <nuxt-link href="/wishlist" class="tp-header-action-btn">
          <svg-wishlist />
          <span class="tp-header-action-badge">{{wishlistStore.wishlists.length}}</span>
        </nuxt-link>
      </div> -->
      <div class="tp-header-action-item" v-if="authStore.user">
        <button @click="cartStore.handleCartOffcanvas" type="button" class="tp-header-action-btn cartmini-open-btn">
          <svg-cart-bag />
          <span class="tp-header-action-badge">{{ authStore.user ? authStore.user.products_in_cart : '0' }}</span>
        </button>
      </div>
      <div class="tp-header-action-item d-lg-none">
        <button
          @click="utilsStore.handleOpenMobileMenu"
          type="button"
          class="tp-header-action-btn tp-offcanvas-open-btn"
        >
          <SvgMenuIcon />
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useWishlistStore } from '@/pinia/useWishlistStore';
import { useUtilityStore} from '@/pinia/useUtilityStore';
import { useLoginStore } from '@/pinia/auth/login/login.store';
import { useCartStore } from '@/pinia/cart/cart.store';

const cartStore = useCartStore();
const wishlistStore = useWishlistStore();
const utilsStore = useUtilityStore();
const authStore = useLoginStore();

</script>
