import { Metadata } from 'next'
import { Footer, DocsSidebar, DocsNav } from '@/app/components'

export const metadata: Metadata = {
    title: 'Documentation - Standard.site',
    description: 'Learn how to implement Standard.site lexicons for long-form publishing on AT Protocol.',
}

export default function DocsLayout({ children }: { children: React.ReactNode }) {
    return (
        <div className="min-h-screen bg-base-100 font-sans">
            <DocsNav />

            <div className="flex gap-x-8 lg:gap-x-16 xl:gap-x-24 justify-center px-8 pt-48 pb-32 md:py-40">
                <section className="hidden md:block shrink-0 w-32">
                    <DocsSidebar />
                </section>

                <main className="flex flex-col w-xl gap-8 min-w-0">
                    <article className="min-w-0 @container/content">
                        {children}
                    </article>
                </main>

                <section className="hidden md:flex shrink-0 w-32">
                    {/* Reserved for table of contents */}
                </section>
            </div>

            <Footer />
        </div>
    )
}