import Nav from "@/components/Nav";
import Footer from "@/components/Footer";

export default async function ModsLayout({children}: {
  children: React.ReactNode;
}) {

  return (
    <div style={{ minHeight: "100vh", paddingBottom: 36 }}>

      <div
        style={{
          maxWidth: 880,
          margin: "0 auto",
          padding: "0 24px",
          transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
        }}>

        <header
          style={{
            padding: "24px 0 0",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}>

          <div
            style={{
              fontFamily: "var(--mono)",
              fontSize: 14,
              fontWeight: 700,
              color: "var(--accent)",
              letterSpacing: "-0.02em",
            }}>
          </div>

        </header>

        <Nav section={"mods"} />

        <main>
          {children}
        </main>
      </div>

      <Footer />
    </div>
  );
}