import { useRef, useEffect } from 'react';

export const useHeaderPortal = () => {
  const headerPortalRef = useRef(null);
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const headerEl = createHeaderElement();
    container.prepend(headerEl);
    headerPortalRef.current = headerEl;

    return () => {
      if (headerEl.isConnected) {
        headerEl.remove();
      }
    };
  }, []);

  const createHeaderElement = () => {
    const headerEl = document.createElement('div');
    headerEl.className = 'custom-table-header';

    Object.assign(headerEl.style, {
      position: 'sticky',
      top: '0',
      zIndex: '20',
      pointerEvents: 'auto',
    });

    return headerEl;
  };

  return { headerPortalRef, containerRef };
};
