import { useContext } from "react";
import { VideoPlayerContext } from "./VideoPlayer";
import Controls from "./VideoControls";
import { AnimatePresence } from "framer-motion";
import { VideoDisplay } from "./VideoDisplay";
import LoadingOverlay from "./LoadingOverlay";

export default function VideoPlayerLayout() {
	const {
		isReady,
		setIsHovering,
		setShowControls,
		showControls,
		isDragging,
	} = useContext(VideoPlayerContext);

	return (
		<>
			<div
				className={`relative w-full bg-black rounded-lg overflow-hidden`}
				style={{ aspectRatio: "21/9" }}
				onMouseEnter={() => {
					setIsHovering(true);
					setShowControls(true);
				}}>
				{!isReady && <LoadingOverlay></LoadingOverlay>}
				<VideoDisplay></VideoDisplay>
				<AnimatePresence>
					{(showControls || isDragging) && <Controls />}
				</AnimatePresence>
			</div>
		</>
	);
}