import React, { useState } from "react";
import { AppSidebar } from "./AppSidebar";
import { MainWorkspace } from "./MainWorkspace";
import { CommandPalette } from "../features/command/CommandPalette";

export function MainLayout() {
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);

  const toggleSidebar = () => setIsSidebarCollapsed(!isSidebarCollapsed);

  return (
    <div className="h-full bg-background text-foreground">
      <AppSidebar
        isCollapsed={isSidebarCollapsed}
        onToggleSidebar={toggleSidebar}
      />
      <div
        className={`flex-1 min-h-0 transition-all duration-300 ease-in-out ${
          isSidebarCollapsed ? "ml-16" : "ml-64"
        }`}
      >
        <MainWorkspace
          isSidebarCollapsed={isSidebarCollapsed}
          onToggleSidebar={toggleSidebar}
        />
      </div>
      <CommandPalette />
    </div>
  );
}