<template>
  <header class="topbar" :class="`topbar--${tagClass}`">
    <div class="topbar-brand">
      <slot name="logo" />
      <span v-if="title" class="topbar-title">{{ title }}</span>
      <slot name="left" />
    </div>
    <div v-if="showSearchBox" class="topbar-search">
      <slot name="search" />
    </div>
    <div v-if="showMenu" class="topbar-menu">
      <slot name="menu" />
    </div>
    <div class="topbar-right">
      <slot name="right-content" />
    </div>
  </header>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  title?: string
  tag?: 'After Login' | 'Before Login'
  showMenu?: boolean
  showSearchBox?: boolean
}>(), {
  tag: 'After Login',
  showMenu: true,
  showSearchBox: false,
})

const tagClass = computed(() => (props.tag === 'Before Login' ? 'before-login' : 'after-login'))
</script>

<style scoped>
.topbar {
  display: flex;
  align-items: center;
  padding: var(--sp-xs) var(--sp-m);
  background: var(--bg-topbar);
  border: 1px solid var(--line-deep);
  gap: var(--topbar-section-gap);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}
.topbar--after-login { height: var(--sp-xxxl); }
.topbar--before-login { height: var(--topbar-height-before-login); }
.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-m);
  flex-shrink: 0;
}
.topbar-title {
  font: var(--text-style-pop-title);
  color: var(--text-heading);
  white-space: nowrap;
}
.topbar-search,
.topbar-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-xxl);
  flex: 1;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  flex-shrink: 0;
}
.topbar--before-login .topbar-right {
  gap: var(--sp-l);
}
</style>
