// src/hooks/useTheme.ts
import { useEffect } from "react";
import { useAtom } from "jotai";
import { themeAtom } from "../atoms";

const ALL_THEMES = ["light", "dark", "red"];

export function useTheme() {
  const [theme, setTheme] = useAtom(themeAtom);

  useEffect(() => {
    const body = document.body;
    ALL_THEMES.forEach((t) => body.classList.remove(t));
    body.classList.add(theme);
    console.log('set ', theme)
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };

  return {
    theme,
    setTheme,
    toggleTheme,
    themes: ALL_THEMES,
  };
}