import { useCallback } from "react";
import { useLift } from "./LiftContext";
import classes from "./LiftLayer.module.css";

export function LiftLayer() {
  const { setPortalContainer, setCloneContainer } = useLift();

  const portalRef = useCallback(
    (node: HTMLDivElement | null) => {
      setPortalContainer(node);
    },
    [setPortalContainer],
  );

  const cloneRef = useCallback(
    (node: HTMLDivElement | null) => {
      setCloneContainer(node);
    },
    [setCloneContainer],
  );

  return (
    <>
      <div ref={portalRef} className={classes.liftLayer} />
      <div ref={cloneRef} className={classes.liftLayer} />
    </>
  );
}
