"use client";

import { useState } from "react";
import { WorkspaceLeftRail } from "@/components/layout/workspace-left-rail";
import { RightPanel } from "@/components/layout/right-panel";
import { ProjectSidebar } from "@/components/layout/project-sidebar";
import { useParams } from "next/navigation";

export default function GettingStartedLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [activeSection, setActiveSection] = useState("projects");
  const params = useParams();
  const projectId = params.projectId as string;
  const workspace = params.workspace as string;

  return (
    <div className="flex h-screen w-full overflow-hidden bg-background">
      {/* Left Rail - Workspace Navigation */}
      <WorkspaceLeftRail activeSection={activeSection} onSectionChange={setActiveSection} />

      {/* Project Sidebar - Getting Started Steps */}
      <ProjectSidebar projectId={projectId} activeSection={activeSection} workspace={workspace} />

      {/* Main Content Area */}
      <main className="flex-1 overflow-hidden">
        {children}
      </main>

      {/* Right Panel - AI Assistant */}
      <RightPanel />
    </div>
  );
}