import { useRef } from 'react';

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

import useIsOverflowing from './useIsOverflowing';

const IsOverflowing = ({
  fallbackValue,
  render,
}: {
  fallbackValue: boolean;
  render: (params: {
    rootRef: RefObject<HTMLElement | null>;
    targetRef: RefObject<HTMLElement | null>;
    isOverflowing: boolean;
  }) => ReactNode;
}) => {
  const targetRef = useRef<HTMLElement>(null);
  const rootRef = useRef<HTMLElement>(null);
  const isOverflowing = useIsOverflowing({ targetRef, rootRef, fallbackValue });

  return render({ rootRef, isOverflowing, targetRef });
};

export default IsOverflowing;