/**
 * Navigation Wrapper - React bridge for vendor navigation behavior
 *
 * @vendor-dependency @vendor-web/js/patterns/navigation.js
 * @cleanup-status ⚠️ Pending vendor cleanup support
 */

import React, { useEffect, useRef, ReactNode } from 'react';
import { navigation } from '@vendor-web/js/patterns/navigation.js';

type NavigationWrapperProps = {
  children: ReactNode;
  className?: string;
};

export const NavigationWrapper: React.FC<NavigationWrapperProps> = ({
  children,
  className = '',
}) => {
  const navRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!navRef.current) return;

    const cleanup = navigation();

    return () => {
      if (typeof cleanup === 'function') {
        cleanup();
      }
    };
  }, []);

  return (
    <div ref={navRef} className={className}>
      {children}
    </div>
  );
};

export default NavigationWrapper;