import { motion } from 'framer-motion';
import { useEffect, useRef } from 'react';

function EnterVideo(props) {
	const opacity = props.opacity || 0;
	const vd = useRef(null);

	useEffect(() => {
		vd.current.addEventListener('ended', props.onVideoEnd);
	}, []);

	return (
		<motion.div
			className="video-wrapper"
			style={{
				position: 'fixed',
				top: 0,
				left: 0,
				width: '100%',
				height: '100%',
				zIndex: -1000,
				opacity: opacity,
				zIndex: -1000,
			}}
			transition={{ type: 'tween' }}
		>
			<video ref={vd} muted autoPlay={true} width={'100%'}>
				<source src="/video/enter.webm" type="video/mp4" />
			</video>
		</motion.div>
	);
}

export default EnterVideo;