"use client";
import "./style.css";
import { useState } from "react";
import { AuthProvider } from "react-oidc-context";
import { oidcConfig, userManager } from "muzak/config/auth";
import { Source_Sans_3, Nunito } from "next/font/google";

const sourceSans = Source_Sans_3({
  weight: ["400"],
  subsets: ["latin"],
});

const nunito = Nunito({
  subsets: ["latin"],
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [isAnimate, setIsAnimate] = useState(false);

  const toggleAnimation = () => {
    setIsAnimate(!isAnimate);
  };

  return (
    <html lang="en" className={nunito.className}>
      <body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}>
        <AuthProvider {...oidcConfig}>{children}</AuthProvider>
        <button
          className={`absolute top-1 left-1 ${isAnimate ? "pause" : "play"}`}
          onClick={toggleAnimation}
        ></button>
      </body>
    </html>
  );
}
