import { useState } from "react";
import { Kitty } from "./components/Kitty";
import { AppProvider } from "./context/AppContext";
import { Music } from "./components/Music";
import { Nvim } from "./components/Nvim";

export default function App() {
  const [loggedIn, setLoggedIn] = useState(false);

  return (
    <AppProvider>
      <main className="h-screen w-screen overflow-hidden bg-[url(/wallpaper.jpg)] bg-cover">
        {loggedIn ? (
          <div className="flex h-full w-full flex-col">
            <Kitty className="w-full flex-1 pb-1 pl-2 pr-2 pt-2">
              <Nvim />
            </Kitty>

            <Music />
          </div>
        ) : (
          <div className="flex h-full items-center justify-center">
            <button
              className="rounded-md border border-black px-2 py-1 hover:border-2 hover:font-bold"
              onClick={() => setLoggedIn(true)}
            >
              Log in
            </button>
          </div>
        )}
      </main>
    </AppProvider>
  );
}