<script setup lang="ts">
import { Menu } from "@lucide/vue";

import type { UserProfile } from "../types/api";

defineProps<{
  user: UserProfile;
  statusText: string;
}>();

defineEmits<{
  openHistory: [];
  logout: [];
}>();
</script>

<template>
  <header class="chat-header">
    <button type="button" class="header-menu-button" aria-label="打开历史会话" @click="$emit('openHistory')">
      <Menu :size="21" aria-hidden="true" />
    </button>

    <div class="assistant-summary">
      <h1>大本营答疑助手</h1>
      <p>{{ statusText }}</p>
    </div>

    <div class="user-summary">
      <span v-if="user.nickname">昵称：{{ user.nickname }}</span>
      <span>用户名：{{ user.name }}</span>
    </div>

    <button type="button" class="header-logout-button" @click="$emit('logout')">退出</button>
  </header>
</template>
