/*import Button from "../button/button.jsx";
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>
}*/

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

type Theme = "light" | "dark";

export default function ThemeSwitcher() {
    const [theme, setTheme] = useState<Theme | "">("");

    useEffect(() => {
        const savedTheme = localStorage.getItem("theme") as Theme | null;
        if (savedTheme) {
            setTheme(savedTheme);
        } else {
            setTheme("light");
        }
    }, []);

    const switchTheme = () => {
        const newTheme: Theme = theme === "light" ? "dark" : "light";
        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>
    );
}