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

export default function Volume() {
	const { isMuted, setIsMuted, volume, setVolume, videoRef } =
		useContext(VideoPlayerContext);
	return (
		<>
			{/* 音量控制 */}
			<div className="group relative flex items-center">
				<button
					onClick={() => setIsMuted(!isMuted)}
					className="text-white hover:text-primaryHover">
					{isMuted ? (
						<SpeakerXMarkIcon className="w-10 h-10" />
					) : (
						<SpeakerWaveIcon className="w-10 h-10" />
					)}
				</button>
				<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
					<div className="bg-black/80 rounded-lg p-2">
						<input
							type="range"
							min="0"
							max="1"
							step="0.1"
							value={volume}
							onChange={(e) => {
								const newVolume = parseFloat(e.target.value);
								setVolume(newVolume);
								if (videoRef.current) {
									videoRef.current.volume = newVolume;
								}
							}}
							className="h-24 w-2 accent-primary-500 [-webkit-appearance:slider-vertical]"
						/>
					</div>
				</div>
			</div>
		</>
	);
}