'use client';

import {useEffect, type ReactNode} from 'react';

type DemoSubnavBarProps = {
  children: ReactNode;
};

export function DemoSubnavBar({children}: DemoSubnavBarProps) {
  useEffect(() => {
    const header = document.querySelector<HTMLElement>('.siteHeader');
    if (!header) {
      return;
    }

    function syncHeaderHeight() {
      if (!header) {
        return;
      }

      document.documentElement.style.setProperty('--site-header-height', `${header.offsetHeight}px`);
    }

    syncHeaderHeight();

    const observer = new ResizeObserver(syncHeaderHeight);
    observer.observe(header);

    return () => observer.disconnect();
  }, []);

  return <div className="demoSubnavBar">{children}</div>;
}
