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]);    

    if(activeTheme == 'light') {
        return (
            <a onClick={() => setActiveTheme(inactiveTheme)} href="#">
                <span>🌙</span>
            </a>
        )
    } else {
        return (
            <a onClick={() => setActiveTheme(inactiveTheme)} href="#">
                <span>☀️</span>
            </a>
        )
    }
}