<template>
  <div class="top-strip">
    <span>
      <slot name="left">ghostguild.org{{ pagePath ? ` / ${pagePath}` : '' }}</slot>
    </span>
    <span>
      <slot name="right">
        <ClientOnly>
          <template v-if="memberData">
            Signed in as {{ memberData.name }}
            <template v-if="memberData.circle">
              &middot; {{ memberData.circle }}
            </template>
          </template>
          <template v-else>
            A cooperative for game developers
          </template>
          <template #fallback>
            A cooperative for game developers
          </template>
        </ClientOnly>
      </slot>
    </span>
  </div>
</template>

<script setup>
defineProps({
  pagePath: { type: String, default: '' },
})

const { memberData } = useAuth()
</script>

<style scoped>
.top-strip {
  padding: 16px 32px;
  border-bottom: 1px dashed var(--border);
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-strip a { color: var(--text-faint); }
.top-strip a:hover { color: var(--candle); }
</style>
