import {useGsapTimeline} from '../../lib/useGsapTimeline';
import {AbsoluteFill} from 'remotion';
import React, {useMemo} from 'react';
import gsap from 'gsap';

export default function GsapAnimation({
	Timeline,
	style,
	className,
	children,
	plugins = [],
}) {
	const memoizedPlugins = useMemo(() => {
		return [...plugins];
	}, [plugins]);

	gsap.registerPlugin(memoizedPlugins);
	const ContainerRef = useGsapTimeline(Timeline);
	return (
		<AbsoluteFill className={className} style={style} ref={ContainerRef}>
			{children}
		</AbsoluteFill>
	);
}