import { usePage } from "@inertiajs/react";
import type { ReactNode } from "react";
import { SidebarProvider } from "@/components/ui/sidebar";
import type { AppVariant } from "@/types";
import { ActiveMarketProvider } from "@/components/trading/active-market";

type Props = {
    children: ReactNode;
    variant?: AppVariant;
};

export function AppShell({ children, variant = "sidebar" }: Props) {
    const isOpen = usePage().props.sidebarOpen;

    if (variant === "header") {
        return (
            <ActiveMarketProvider>
                <div className="flex min-h-screen w-full flex-col">
                    {children}
                </div>
            </ActiveMarketProvider>
        );
    }

    return (
        <ActiveMarketProvider>
            <SidebarProvider defaultOpen={isOpen}>{children}</SidebarProvider>
        </ActiveMarketProvider>
    );
}