import React from "react";
import Navbar from "@/components/navbar";
import Footer from "@/components/footer";
import { api } from "@/trpc/server";
import AppProvider from "../_components/app-provider";

async function Layout({ children }: { children: React.ReactNode }) {
  const sessionPlayer = await api.player.getBySession();

  return (
    <AppProvider initialSessionPlayer={sessionPlayer}>
      <div className="gradient-bg min-h-screen">
        <Navbar />
        <div className="container mb-8 flex size-full min-h-screen flex-col items-center space-y-6">
          {children}
        </div>
        <Footer />
      </div>
    </AppProvider>
  );
}

export default Layout;