import { useEffect, useRef } from '@wordpress/element';

const { Masonry } = window;

export default function MasonryWrapper(props) {
	const { options, children, ...restProps } = props;

	const ref = useRef();

	// Init.
	useEffect(() => {
		const instance = new Masonry(ref.current, options);

		return () => {
			instance.destroy();
		};
	}, [ref, options, children]);

	return (
		<div ref={ref} {...restProps}>
			{children}
		</div>
	);
}