import { useEffect, useState } from "react";

const Settings = () => {
    const [darkMode, setDarkMode] = useState(false);

    useEffect(() => {
        const savedTheme = localStorage.getItem("theme");

        if (savedTheme === "dark") {
            setDarkMode(true);
        }
    }, []);

    const toggleTheme = () => {
        const newTheme = !darkMode;

        setDarkMode(newTheme);

        if (newTheme) {
            document.documentElement.classList.add("dark");
            localStorage.setItem("theme", "dark");
        } else {
            document.documentElement.classList.remove("dark");
            localStorage.setItem("theme", "light");
        }
    };

    return (
        <div className="min-h-screen p-6 bg-gray-100 dark:bg-gray-900 text-black dark:text-white transition-all duration-300">
            <h1 className="text-3xl font-bold mb-6">
                Settings
            </h1>

            <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
                <h2 className="text-xl font-semibold mb-4">
                    Pengaturan Tema
                </h2>

                <button
                    onClick={toggleTheme}
                    className={`px-5 py-3 rounded-xl font-semibold transition-all ${
                        darkMode
                            ? "bg-yellow-400 text-black"
                            : "bg-blue-600 text-white"
                    }`}
                >
                    {darkMode ? "Mode Terang ☀️" : "Mode Gelap 🌙"}
                </button>
            </div>
        </div>
    );
};

export default Settings;