import { animated, useTransition } from '@react-spring/web'

const useState = wp.element.useState;
const useEffect = wp.element.useEffect;

const WBPreviewModal = ({visible, children}) => {
    const [modalVisible, setModalVisible] = useState(false);

    const transitions = useTransition(modalVisible, {
      from: { opacity: 0, transform: "translateY(-40px)" },
      enter: { opacity: 1, transform: "translateY(0px)" },
      leave: { opacity: 0, transform: "translateY(-40px)" }
    });

    useEffect(() => {
        setModalVisible(visible);
    }, [visible]);

    return (
        <>
        {transitions((style, item) => 
               item && (
                <animated.div style={style} className="wb-preview-website-modal-wrap">
                    {children}
                </animated.div>
              )
        )}
        </>
    );
  
};
export default WBPreviewModal;