import { useEffect, useState } from "react";

export default function ThemeToggle() {
	const [theme, setTheme] = useState(
		localStorage.getItem("theme") ?? "light"
	);

	const handleClick = () => {
		setTheme(theme === "light" ? "dark" : "light");
	};

	useEffect(() => {
		if (theme === "dark") {
			document.documentElement.classList.add("dark");
		} else {
			document.documentElement.classList.remove("dark");
		}
		localStorage.setItem("theme", theme);
	}, [theme]);

	return (
		<button className="hover:text-ctp-yellow" onClick={handleClick}>
			{theme === "light" ? "" : ""}
		</button>
	);
}
