import { useEffect, useState } from "react";
import { Switches } from "../../Switches";

const DarkMode = () => {
  const [theme, setTheme] = useState(
    localStorage.getItem("selectedTheme") || "dark"
  );

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("selectedTheme", theme);
    window.dispatchEvent(new Event("themeChanged")); // Dispatch custom event
  }, [theme]);

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

  const customSwitchStyles = {
    transform: "rotate(90deg)",
  };

  return (
    <Switches
      size="large"
      type="lg-switches"
      value={theme === "dark"}
      onChange={toggleTheme}
      customStyles={customSwitchStyles}
    />
  );
};

export default DarkMode;
