<script lang="ts">
  export let theme: 'light' | 'dark' = 'light';
  export let onToggleTheme: () => void = () => {};
</script>

<header class="workspace-topbar">
  <div class="brand-mark" aria-label="SenlinAI">
    <span class="brand-logo">S</span>
    <span>SenlinAI</span>
  </div>
  <form class="search-box" role="search" aria-label="Workspace search" on:submit|preventDefault>
    <label class="sr-only" for="global-search">Search</label>
    <input id="global-search" aria-label="Global search" placeholder="搜索项目、频道、文档、任务、联系人..." />
    <button type="submit" aria-label="Search workspace">搜索</button>
  </form>
  <div class="topbar-actions">
    <button class="theme-toggle" type="button" aria-label={theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'} on:click={onToggleTheme}>
      <span aria-hidden="true">{theme === 'light' ? '☾' : '☀'}</span>
    </button>
    <button aria-label="Back" disabled>←</button>
    <button aria-label="Forward" disabled>→</button>
    <button aria-label="Notifications" disabled>!</button>
    <button aria-label="Help" disabled>?</button>
  </div>
</header>
