import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "./AppSidebar";
import { Outlet } from "react-router-dom";
import { motion } from "framer-motion";

export function MainLayout() {
  return (
    <motion.div layout>
      <SidebarProvider defaultOpen>
        <div className="flex min-h-screen w-full pr-2">
          <AppSidebar />
          <main className="flex-1 overflow-hidden">
            <div className="flex h-14 w-full items-center border-b px-4 gap-4">
              <SidebarTrigger />
            </div>
            <div className="overflow-auto h-[calc(100vh-3.5rem)] max-w-[1500px]">
              <Outlet />
            </div>
          </main>
        </div>
      </SidebarProvider>
    </motion.div>
  );
}
