import { useEffect } from "react";
import useLocalStorage from "./useLocalStorage";
/**
 * Custom hook for managing theme state.
 *
 * This hook utilizes local storage to persist the theme state across sessions. It provides functionality
 * to toggle between light and dark themes and automatically applies the selected theme to the document.
 *
 * @returns A tuple containing:
 *          - `isDark`: a boolean indicating whether the current theme is dark.
 *          - `toggleTheme`: a function to toggle the theme between light and dark.
 *
 * @example
 * const [isDark, toggleTheme] = useTheme();
 * // Use isDark to determine the theme state and toggleTheme to change the theme.
 */
const useTheme = (): [boolean, () => void] => {
	const [theme, setTheme] = useLocalStorage<string>("theme", "light");
	const isDark = theme === "dark";

	const toggleTheme = () => {
		const newTheme = theme === "light" ? "dark" : "light";
		setTheme(newTheme);
		document.documentElement.dataset.theme = newTheme;
	};

	useEffect(() => {
		document.documentElement.dataset.theme = theme;
	}, [theme]);

	return [isDark, toggleTheme];
};

export default useTheme;