const THEMES = {
  DARK: "DARK",
  LIGHT: "LIGHT",
};

const flipFlopTheme = (theme) =>
  THEMES[theme] === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK;

const themePickerText = {
  DARK: "light mode.",
  LIGHT: "dark mode.",
};

const themeSwitcher = document.getElementById("theme-switcher");

const setTheme = (theme) => {
  themeSwitcher.textContent = `${themePickerText[theme]}`;

  document.documentElement.setAttribute("data-theme", theme);
  localStorage.setItem("theme", theme);
};

themeSwitcher.addEventListener("click", () =>
  setTheme(flipFlopTheme(document.documentElement.getAttribute("data-theme"))),
);

setTheme(localStorage.getItem("theme") || THEMES.LIGHT);