<script lang="ts">
  import { Menu } from 'lucide-svelte';
  import { setSidebarState, sidebarState } from '$lib/stores/layout';
  import Breadcrumbs from './Breadcrumbs.svelte';
  import MonthSelector from './MonthSelector.svelte';
  import UserMenu from './UserMenu.svelte';

  function toggleMobileSidebar() {
    setSidebarState($sidebarState === 'hidden' ? 'expanded' : 'hidden');
  }
</script>

<header class="sticky top-0 z-20 border-b border-base-300 bg-base-100/95 backdrop-blur" data-testid="topbar">
  <div class="flex items-center justify-between gap-3 px-4 py-3">
    <div class="flex min-w-0 items-center gap-2">
      <button
        class="btn btn-ghost btn-sm btn-circle md:hidden"
        aria-label="Toggle menu"
        on:click={toggleMobileSidebar}
        data-testid="mobile-hamburger"
      >
        <Menu size={18} />
      </button>
      <Breadcrumbs />
    </div>

    <div class="flex items-center gap-2">
      <MonthSelector />
      <UserMenu />
    </div>
  </div>
</header>
