import { useTheme } from "@/context/ThemeContext";
import { Monitor, Sun, Moon } from "lucide-react";
import { useState } from "react";

export function ThemeSwitcher() {
	const { setTheme } = useTheme();

	const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);

	const handleThemeChange = (newTheme: string) => {
		setTheme(newTheme);
		setDropdownOpen(false);
	};

	return (
		<div className="relative">
			<button
				onClick={() => setDropdownOpen(!dropdownOpen)}
				className="flex items-center space-x-2 p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600">
				<Monitor className="h-5 w-5 text-gray-800 dark:text-gray-200" />
			</button>

			{dropdownOpen && (
				<div className="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-800 rounded shadow-lg z-10">
					<ul>
						<li
							onClick={() => handleThemeChange("light")}
							className={`cursor-pointer px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white`}>
							<Sun className="inline-block h-5 w-5 mr-2 text-yellow-500" />{" "}
							Light
						</li>
						<li
							onClick={() => handleThemeChange("dark")}
							className={`cursor-pointer px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white`}>
							<Moon className="inline-block h-5 w-5 mr-2 text-blue-500" /> Dark
						</li>
						<li
							onClick={() => handleThemeChange("system")}
							className={`cursor-pointer px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-white`}>
							<Monitor className="inline-block h-5 w-5 mr-2 text-gray-800 dark:text-gray-200" />{" "}
							Default
						</li>
					</ul>
				</div>
			)}
		</div>
	);
}
