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);
	const handleClick = (event) => {
		event.stopPropagation(); // 阻止事件冒泡
		if (videoRef.current?.paused) {
			videoRef.current.play();
		} else {
			videoRef.current?.pause();
		}
	};
	return (
		<>
			<div
				onClick={handleClick}
				className="text-white hover:text-primaryHover">
				{isPlaying ? (
					<PauseIcon className="w-10 h-10" />
				) : (
					<PlayIcon className="w-10 h-10" />
				)}
			</div>
		</>
	);
}
