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

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

	if (opacity == 1) {
		setTimeout(() => {
			vd.current.play();
		}, 100);
	}

	useEffect(() => {
		vd.current.addEventListener('ended', () => {
			setTimeout(() => {
				vd.current.currentTime = 0;
			}, 1000);
		});
	}, []);

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

export default EnterToFloorTwo;