import React, { createContext, useContext, useState, useEffect } from "react";

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState(() => localStorage.getItem("theme") || "light");
  const [themeValues, setThemeValues] = useState({});

  useEffect(() => {
    const root = document.documentElement;
    const computedStyles = getComputedStyle(root);

    setThemeValues({
      sansivBG: computedStyles.getPropertyValue("--body-color").trim(),
      sansivTitle: computedStyles.getPropertyValue("--title-color").trim(),
      sansivHeader: computedStyles.getPropertyValue("--header-color").trim(),
    });
  }, [theme]);

  const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    localStorage.setItem("theme", newTheme);
    document.documentElement.setAttribute("data-theme", newTheme);
  };

  return (
    <ThemeContext.Provider value={{ theme, themeValues, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useSansivTheme = () => useContext(ThemeContext);