import React from 'react';
import { usePageHeader } from '@/contexts/PageHeaderContext';
import { useLocation } from 'react-router-dom';

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

import { DocLink } from '@/components/DocLink';

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

  if (!title) return null;

  // Only apply max-w-5xl for settings and appearance pages (boxed layout)
  // All other pages should be full width
  const isBoxedLayout = location.pathname.startsWith('/settings') || location.pathname.startsWith('/appearance');
  const containerClass = isBoxedLayout ? 'w-full max-w-5xl mx-auto' : 'w-full';

  // 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={`${containerClass} px-4 py-3 flex items-center justify-between min-w-0`}>
        <div className="min-w-0 flex-1 flex items-center">
          <h1 className="text-lg font-semibold truncate">{title}</h1>
          <DocLink />
        </div>
        {action && <div className="flex-shrink-0 ml-4">{action}</div>}
      </div>
    </div>
  );
}
