"use client";

import type { ReactNode } from "react";
import { Sidebar } from "./sidebar";
import { useCollapsibleSidebar, SidebarBackdrop, SidebarToggle } from "./collapsible-sidebar";

export function LessonsShell({ children }: { children: ReactNode }) {
  const { mobileOpen, desktopCollapsed, toggle, closeMobile } = useCollapsibleSidebar();

  return (
    <div className="playground-frame relative mx-auto flex w-full max-w-7xl flex-1">
      <SidebarBackdrop show={mobileOpen} onClick={closeMobile} />
      <Sidebar mobileOpen={mobileOpen} desktopCollapsed={desktopCollapsed} onNavigate={closeMobile} />
      <main className="min-w-0 flex-1 bg-white">
        <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
          <SidebarToggle onClick={toggle} />
          {children}
        </div>
      </main>
    </div>
  );
}