import { FocusScope } from '@react-aria/focus';
import { useEffect, useRef } from 'react';

type FocusBoundaryProps = {
  children: React.ReactNode;
};

const FocusBoundary = ({ children }: FocusBoundaryProps) => {
  const wrapperReference = useRef<HTMLDivElement>(null);
  useEffect(() => {
    wrapperReference.current?.focus({ preventScroll: true });
  }, []);

  return (
    <FocusScope contain restoreFocus>
      <div ref={wrapperReference} tabIndex={-1}>
        {children}
      </div>
    </FocusScope>
  );
};

export default FocusBoundary;