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

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

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

defineEmits<{
  openHistory: [];
  openPersonalCenter: [];
}>();
</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>

    <button type="button" class="header-profile-button" aria-label="打开个人中心" @click="$emit('openPersonalCenter')">
      <UserRound :size="18" aria-hidden="true" />
      <span>{{ user.nickname?.trim() || user.name }}</span>
    </button>
  </header>
</template>
