import Button from "../Button/Button.tsx";
import { useState, useEffect } from "react";
import styles from "./ThemeSwitcher.module.css";


export default function ThemeSwitcher() {

    const [theme, setTheme] = useState("");

    useEffect(() => {
        const t = localStorage.getItem("theme");
        if(t) setTheme(t);
        else setTheme("light");
    }, []);

    const switchTheme = () => {

        let newTheme = theme === "light" ? "dark" : "light";

        if(theme === null || theme === "") newTheme = "dark";

        localStorage.setItem("theme", newTheme);
        setTheme(newTheme);

        window.dispatchEvent(new Event("theme-changed"));
    };

    return <Button variant={"default"} onClick={switchTheme} className={styles.themeBtn}>
            <img src={`/icons/theme/${theme}.svg`} alt={`${theme} icon`} className={styles.themeIcon} />
            <p>Changer de thème </p>
    </Button>
}