import { Bars3Icon } from '@heroicons/react/24/outline';

interface HeaderProps {
  setSidebarOpen: (open: boolean) => void;
  title?: string;
}

export function Header({ setSidebarOpen, title = 'Dashboard' }: HeaderProps) {
  return (
    <div className="sticky top-0 z-40 flex items-center gap-x-4 bg-background px-3 py-2 shadow-sm sm:px-4 lg:hidden border-b border-border">
      <button
        type="button"
        className="-m-1.5 p-1.5 text-text-secondary lg:hidden hover:text-text-primary transition-colors"
        onClick={() => setSidebarOpen(true)}
      >
        <span className="sr-only">Open sidebar</span>
        <Bars3Icon className="h-5 w-5" aria-hidden="true" />
      </button>
      <div className="flex-1 text-sm font-medium leading-tight text-text-primary">{title}</div>
    </div>
  );
}
