import { Footer, Layout, Navbar } from 'nextra-theme-docs';

import React from 'react';
import { Head } from 'nextra/components';
import { getPageMap } from 'nextra/page-map';
import 'nextra-theme-docs/style.css';

// export const metadata = {
//   // Define your metadata here
//   // For more information on metadata API, see: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
// };

// const banner = <Banner storageKey="some-key">Nextra 4.0 is released 🎉</Banner>;
const navbar = (
  <Navbar
    logo={
      <img
        src="https://cdn-o.suno.com/Logo-7.svg"
        style={{ height: '32px', width: 'auto' }}
        alt="Suno Logo"
      />
    }
    // ... Your additional navbar options
  />
);
const footer = <Footer>MIT {new Date().getFullYear()}</Footer>;

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      // Not required, but good for SEO
      lang="en"
      // Required to be set
      dir="ltr"
      // Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
      suppressHydrationWarning
    >
      <Head
      // ... Your additional head options
      >
        {/* Your additional tags should be passed as `children` of `<Head>` element */}
      </Head>
      <body>
        <Layout
          navbar={navbar}
          pageMap={await getPageMap()}
          docsRepositoryBase="https://github.com/suno-ai/glockenspiel/blob/main/suno_wiki"
          footer={footer}
          // ... Your additional layout options
          feedback={{ content: null }}
          sidebar={{
            autoCollapse: true,
            defaultMenuCollapseLevel: 1,
          }}
        >
          {children}
        </Layout>
      </body>
    </html>
  );
}
