"use client";

import { Menu, NotebookPen } from "lucide-react";

import { Button } from "@/components/ui/button";
import { ThemeToggle } from "@/components/theme/theme-toggle";
import { useSideNav } from "@/components/nav/side-nav-provider";

/**
 * Mobile (< md) app top bar: hamburger (opens the nav drawer) + brand,
 * with the theme picker on the right so it's reachable without opening
 * the drawer. The page's own header (board title, counts, actions) sits
 * in the content area just below this bar.
 */
export function MobileTopBar() {
  const { setMobileOpen } = useSideNav();

  return (
    <header className="flex h-14 shrink-0 items-center gap-1.5 border-b bg-background px-2.5 md:hidden">
      <Button variant="ghost" size="icon" onClick={() => setMobileOpen(true)} aria-label="Open menu">
        <Menu className="size-5" />
      </Button>

      <div className="flex min-w-0 items-center gap-2">
        <span className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
          <NotebookPen className="size-4" />
        </span>
        <span className="truncate font-heading text-[15px] font-bold tracking-tight">Organize</span>
      </div>

      <div className="ml-auto flex shrink-0 items-center">
        <ThemeToggle collapsed menuSide="bottom" menuAlign="end" />
      </div>
    </header>
  );
}