import { Button } from "@kobalte/core/button";
import { FolderPicker } from "./components/folder-picker/FolderPicker";
import { Shortcuts } from "./components/shortcuts/Shortcuts";

export const Settings = () => {
    const logout = () => {
        localStorage.removeItem("access");
        localStorage.removeItem("refresh");
        window.location.href = "/login";
    };

    return (
        <>
            <main class="container pt-2">
                <div class="flex flex-col px-4 gap-2">
                    <Button as="a" href="/">
                        Back to home
                    </Button>
                    <h1 class="text-3xl font-bold">Settings</h1>

                    <FolderPicker />
                    <Shortcuts />
                    <Button
                        class="p-2 bg-neutral-100 border mt-4 border-neutral-300"
                        onClick={logout}
                    >
                        Logout
                    </Button>
                </div>
            </main>
        </>
    );
};