import HideButton from '../components/HideButton'
import { setTheme } from "../assets/functions";
import { Outlet, Link } from "react-router-dom";

function Settings() {
    setTheme();
    var isChecked = localStorage.getItem("contenttype");
    return (
      <main id="settings-container" className="fade">
        <div id="settings-nav">
          <h1>Settings</h1>
          <nav id="nav_item">
            <Link id='peronsalization' to="/sui/settings/personalization">Personalization</Link>
            <Link id='applications' to="/sui/settings/apps">Applications</Link>
            <Link id='bookmarks' to="/sui/settings/bookmarks">Bookmarks</Link>
            <Link id='themes' to="/sui/settings/themes">Themes</Link>
            <Link id='providers' to="/sui/settings/providers">Search Providers</Link>
          </nav>
          <nav id="nav_item">
            <header id="modal-footer">
              <HideButton 
                checked = {isChecked}
              />
            </header>
            <Link to="/sui">Back Home</Link>
          </nav>
        </div>
        <Outlet />
      </main>
    );
}

export default Settings;