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

export default function Brightness() {
	const { brightness, setBrightness } = useContext(VideoPlayerContext);
	return (
		<>
			{/* 亮度控制 */}
			<div className="relative group flex items-center">
				<div className="text-white hover:text-primaryHover">
					<SunIcon className="w-10 h-10" />
				</div>
				<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.1"
							max="2"
							step="0.1"
							value={brightness}
							onChange={(e) =>
								setBrightness(parseFloat(e.target.value))
							}
							className="h-24 w-2 accent-primary-500 [-webkit-appearance:slider-vertical]"
						/>
					</div>
				</div>
			</div>
		</>
	);
}