import type { ReactNode } from "react";
import {
    SidebarInset,
    SidebarProvider,
    SidebarTrigger,
} from "@/components/ui/sidebar";
import { Separator } from "@/components/ui/separator";
import { AdminSidebar } from "@/components/admin-sidebar";
import { LegacyTextLocalizer } from "@/components/legacy-text-localizer";

export default function AdminLayout({ children }: { children: ReactNode }) {
    return (
        <LegacyTextLocalizer>
            <SidebarProvider>
                <AdminSidebar />
                <SidebarInset className="min-w-0 w-full max-w-full bg-muted/10">
                    <header className="sticky top-0 z-40 flex min-h-14 w-full min-w-0 shrink-0 items-center gap-2 border-b border-border/70 bg-background/90 px-2 py-2 backdrop-blur-xl transition-[width,height] ease-linear sm:h-14 sm:gap-3 sm:px-4 sm:py-0">
                        <SidebarTrigger className="-ml-1" />
                        <Separator
                            orientation="vertical"
                            className="mr-1 h-4"
                        />
                        <div className="min-w-0 truncate text-[11px] font-semibold uppercase tracking-[.18em] text-muted-foreground">
                            Admin Console
                        </div>
                    </header>
                    <main className="product-page min-h-0 min-w-0 w-full max-w-full flex-1 overflow-y-auto overflow-x-hidden">
                        {children}
                    </main>
                </SidebarInset>
            </SidebarProvider>
        </LegacyTextLocalizer>
    );
}