import { ref, onMounted } from "vue";

export function useTheme() {
  const isDarkMode = ref(false);

  function setTheme(dark: boolean) {
    isDarkMode.value = dark;
    document.documentElement.setAttribute(
      "data-theme",
      dark ? "dark" : "light",
    );
    localStorage.setItem("theme", dark ? "dark" : "light");
  }

  function toggleTheme() {
    setTheme(!isDarkMode.value);
  }

  onMounted(() => {
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme) {
      setTheme(savedTheme === "dark");
    } else {
      setTheme(false);
    }
  });

  return {
    isDarkMode,
    setTheme,
    toggleTheme,
  };
}