import { Menu } from 'lucide-react';

import { Button } from '../ui/button';

import { Wordmark } from './wordmark';

/**
 * Props for the Topbar component.
 */
interface TopbarProps {
  /** Callback to toggle the mobile navigation sheet */
  onMobileMenuToggle?: () => void;
}

/**
 * Top navigation bar shown wherever the sidebar is hidden (below ``md``).
 *
 * It carries the wordmark and a labelled Menu button rather than a bare
 * hamburger: the bar's background is a shade off the page's own, so an icon
 * alone on an almost-invisible strip left merchants at narrow widths
 * believing the navigation had disappeared entirely.
 *
 * @param {TopbarProps} props - Component props
 * @returns {React.ReactElement} Top navigation bar element
 */
export function Topbar({ onMobileMenuToggle }: TopbarProps) {
  return (
    <header className="flex h-14 flex-none items-center gap-3 border-b border-border-light bg-card px-4 md:hidden">
      <Wordmark className="h-5" />
      <Button
        variant="outline"
        size="sm"
        className="ml-auto"
        onClick={onMobileMenuToggle}
        aria-label="Open navigation menu"
      >
        <Menu />
        Menu
      </Button>
    </header>
  );
}