interface ContentProps {
  pos: Point;
  className?: string;
}

const Content: React.FC<ContentProps> = ({ pos, className, children }) => {
  const ref = React.useRef<HTMLDivElement>(null);
  const { clientWidth, clientHeight } = document.documentElement;
  React.useLayoutEffect(() => {
    if (!ref.current)
      return;
    const rect = ref.current.getBoundingClientRect();
    if (rect.left + rect.width > clientWidth) {
      ref.current.style.left = Math.max(0, rect.left - rect.width) + 'px';
    }
    if (rect.top + rect.height > clientHeight) {
      ref.current.style.top = Math.max(0, rect.top - rect.height) + 'px';
    }
  }, [pos.x, pos.y]);
  return (
    <Defer>
      <div ref={ref} className={className} style={{
        position: 'fixed', left: pos.x, top: pos.y, maxWidth: clientWidth, maxHeight: clientHeight
      }}>
        {children}
      </div>
    </Defer>
  );
};