import { useState, type ReactNode } from "react";
import { type Theme, ThemeContext } from "./ThemeContext";
import { cn } from "tailwind-variants";

type ThemeProviderProps = {
  children?: ReactNode;
  defaultTheme?: Theme;
};

export const ThemeProvider = ({
  children,
  defaultTheme,
}: ThemeProviderProps) => {
  const [theme, setTheme] = useState<Theme>(defaultTheme || "light");
  const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");

  const frameworkClass = "dg";
  const themeClass = cn(frameworkClass, theme);

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme, themeClass }}>
      <div
        className={"dg-theme-provider"}
        style={
          theme == "light" ? { background: "white" } : { background: "black" }
        }
      >
        {children}
      </div>
    </ThemeContext.Provider>
  );
};