<script setup lang="ts">
import { useClerk, useUser } from '@clerk/nuxt/composables';
import { useHeaderMenu } from '../composables/header-menu.ts';
import MenuIcon from './MenuIcon.vue';
const clerk=useClerk(), {isSignedIn}=useUser();
const {menu,trigger,open,toggle,close}=useHeaderMenu();
</script>
<template>
 <div v-if="isSignedIn" ref="menu" class="account-menu">
  <button ref="trigger" type="button" class="account-trigger" aria-label="Account" :aria-expanded="open" aria-controls="account-options" @click="toggle"><svg aria-hidden="true" focusable="false" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="8" r="3.5"/><path d="M5 21v-2a7 7 0 0 1 14 0v2"/></svg></button>
  <div v-if="open" id="account-options" class="menu-popover account-popover">
   <a class="menu-item" href="/help"><MenuIcon name="help" /><span>Help and support</span></a>
   <button type="button" class="menu-item" @click="close();clerk?.signOut({redirectUrl:'/'})"><MenuIcon name="sign-out" /><span>Sign out</span></button>
  </div>
 </div>
</template>
