import { Header } from "@/components/layout/header";
import { Footer } from "@/components/layout/footer";
import { Sidebar } from "@/components/layout/sidebar";
import { MobileNav } from "@/components/layout/mobile-nav";

export default function LessonsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="playground-bg flex min-h-screen flex-col">
      <Header />
      <div className="playground-frame relative mx-auto flex w-full max-w-6xl flex-1">
        <Sidebar />
        <main className="flex-1 bg-white">
          <div className="relative p-4 lg:hidden">
            <MobileNav />
          </div>
          <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
            {children}
          </div>
        </main>
      </div>
      <Footer />
    </div>
  );
}