import { THEME_KEY } from "~/constant/key";
import type { CustomTheme } from "~/layouts/Navigation/components/ThemeChange/types";

export function useTheme() {
  const mode = useColorMode<CustomTheme>({ attribute: "data-theme" });
  const theme = useLocalStorage(THEME_KEY, "light");

  function toggleTheme() {
    const _theme = theme.value === "dark" ? "light" : "dark";
    theme.value = _theme;
  }

  watch(() => theme.value, newVal => mode.value = newVal, {
    immediate: true,
  });

  const isDarkTheme = computed(() => false);

  return {
    theme,
    isDarkTheme,
    toggleTheme,
  };
}
