import styles from '../styles/components/Buttons.module.css';
import Link from 'next/link'
import { useState, useEffect } from "react";

export default function ThemeToggle() {
    const [activeTheme, setActiveTheme] = useState("light");
    const inactiveTheme = activeTheme === "light" ? "dark" : "light";
    
    useEffect(() => {
        const savedTheme = window.localStorage.getItem("theme");
        savedTheme && setActiveTheme(savedTheme);
    }, []);
    
    useEffect(() => {
        document.body.dataset.theme = activeTheme;
        window.localStorage.setItem("theme", activeTheme);
    }, [activeTheme]);    

    return (
        <a onClick={() => setActiveTheme(inactiveTheme)} href="#">
            <span>🌙</span>
        </a>
    )
}