import { useContext } from "react";
import { VideoPlayerContext } from "../VideoPlayer";
import {
	ArrowsPointingInIcon,
	ArrowsPointingOutIcon,
} from "@heroicons/react/24/solid";

export default function FullScreen() {
    const { videoRef } = useContext(VideoPlayerContext);
	return (
		<>
			<div
				onClick={() => {
					if (document.fullscreenElement) {
						document.exitFullscreen();
					} else {
						videoRef.current?.parentElement?.requestFullscreen();
					}
				}}
				className="text-white hover:text-primary-400">
				{document.fullscreenElement ? (
					<ArrowsPointingInIcon className="w-10 h-10" />
				) : (
					<ArrowsPointingOutIcon className="w-10 h-10" />
				)}
			</div>
		</>
	);
}
