"use client";

import { Sidebar } from "@/components/layout/Sidebar";
import { Header } from "@/components/layout/Header";
import { SidebarProvider, useSidebar } from "@/components/layout/SidebarContext";

function AdminContent({ children }: { children: React.ReactNode }) {
    const { sidebarWidth, isResizing } = useSidebar();

    return (
        <div
            className={`flex-1 min-h-screen ${isResizing ? '' : 'transition-all duration-300 ease-in-out'}`}
            style={{ marginLeft: `${sidebarWidth}px` }}
        >
            <Header />
            <main className="animate-fade-in" style={{ padding: "10px 10px 10px 0" }}>{children}</main>
        </div>
    );
}

export default function AdminLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <SidebarProvider>
            <div className="min-h-screen">
                <Sidebar />
                <AdminContent>{children}</AdminContent>
            </div>
        </SidebarProvider>
    );
}