import { useEffect, useRef } from 'react';
// Load the pinned hosted module once in your application shell:
// <script type="module" src="https://navbar.ufplanets.com/v0.4.1/ufp-global-nav.js"></script>
// For Next.js, use this wrapper as a client component. Do not import a second header implementation.
export function GlobalNavigation({activeSection='forums',context='main',theme='nexus'}:{activeSection?:string;context?:'main'|'forums'|'fleet-manager';theme?:'nexus'|'forum'|'operations'}) {
  const ref=useRef<HTMLElement>(null);
  useEffect(()=>{
    let disposed=false;
    customElements.whenDefined('ufp-global-nav').then(()=>{
      if(disposed||!ref.current)return;
      // Assign config/account after upgrade. Keep auth and router ownership in the host.
      Object.assign(ref.current,{account:{status:'signed-out'}});
    });
    return()=>{disposed=true;};
  },[]);
  // Local JSX typing avoids depending on a second copy of the custom element bundle.
  return <ufp-global-nav ref={ref} context={context} theme={theme} active-section={activeSection}/>;
}
declare module 'react' {
  namespace JSX {interface IntrinsicElements {'ufp-global-nav':React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>,HTMLElement>&{'active-section'?:string;context?:string;theme?:string}}}
}