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

export default function Play() {
	const { isPlaying, videoRef } = useContext(VideoPlayerContext);

	return (
		<>
			<button
				onClick={() =>
					videoRef.current?.paused
						? videoRef.current.play()
						: videoRef.current?.pause()
				}
				className="text-white hover:text-primaryHover">
				{isPlaying ? (
					<PauseIcon className="w-10 h-10" />
				) : (
					<PlayIcon className="w-10 h-10" />
				)}
			</button>
		</>
	);
}