<template>
  <ClientOnly>
    <div class="flex items-center gap-x-4" :class="containerClass">
      <!-- Cart Icon (always visible) -->

      <NuxtLink
        to="/shop"
        :class="linkClass + ' flex items-center'"
        aria-label="장바구니"
      >
        <font-awesome-icon :icon="['fas', 'shopping-cart']" class="h-5 w-5" />
      </NuxtLink>

      <!-- If not logged in: show 로그인 / 회원가입 -->
      <template v-if="!userStore.userLoggedIn">
        <NuxtLink
          to="/login"
          :class="linkClass + ' flex items-center h-5 w-5'"
          aria-label="로그인"
        >
          <font-awesome-icon :icon="['fas', 'user']" class="h-5 w-5" />
        </NuxtLink>
      </template>

      <!-- If logged in: show 마이페이지 / 로그아웃 -->
      <template v-else>
        <NuxtLink
          to="/mypage"
          :class="linkClass + ' text-sm font-semibold leading-6'"
        >
          <font-awesome-icon :icon="['fas', 'user']" class="h-5 w-5" />
          마이페이지
        </NuxtLink>
        <a
          href="#"
          @click.prevent="handleLogout"
          :class="linkClass + ' text-sm font-semibold leading-6'"
        >
          로그아웃
        </a>
      </template>
    </div>
  </ClientOnly>
</template>

<script setup lang="ts">
import useUserStore from '@/stores/user';
import { navigateTo } from '#app';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

// Accept optional classes for container and links
const props = defineProps({
  containerClass: {
    type: String,
    default: '',
  },
  linkClass: {
    type: String,
    default:
      'text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300',
  },
});

const userStore = useUserStore();

const handleLogout = async () => {
  await userStore.signOut();
  navigateTo('/login');
};
</script>

<style scoped>
/* No additional scoped CSS needed—relies entirely on Tailwind utility classes */
</style>
