import React from 'react';
import { usePageHeader } from '@/contexts/PageHeaderContext';

interface PageHeaderProps {
  fullscreen?: boolean;
  hideOnDesktop?: boolean;
}

export function PageHeader({ fullscreen = false, hideOnDesktop = false }: PageHeaderProps) {
  const { title, action } = usePageHeader();

  if (!title) return null;

  // PageHeader is now ABOVE submenu in DOM order
  // z-20 ensures it stays on top when both are sticky
  // Only hide on desktop if explicitly requested (for mobile-only headers)
  return (
    <div className={`sticky top-0 z-20 border-b bg-background ${hideOnDesktop ? 'md:hidden' : ''}`}>
      <div className="w-full max-w-5xl mx-auto px-4 py-3 flex items-center justify-between min-w-0">
        <div className="min-w-0 flex-1">
          <h1 className="text-lg font-semibold truncate">{title}</h1>
        </div>
        {action && <div className="flex-shrink-0 ml-4">{action}</div>}
      </div>
    </div>
  );
}