import { ReactNode } from "react";
import { cn } from "@/lib/utils";

interface DashboardLayoutProps {
  header: ReactNode;
  chart: ReactNode;
  orderBook: ReactNode;
  orderForm: ReactNode;
  className?: string;
}

export function DashboardLayout({
  header,
  chart,
  orderBook,
  orderForm,
  className,
}: DashboardLayoutProps) {
  return (
    <div
      className={cn(
        "flex h-[calc(100vh-64px)] flex-col overflow-hidden",
        className,
      )}
    >
      {/* 1. Header Area */}
      <div className="flex-none border-b border-border bg-background">
        {header}
      </div>

      {/* 2. Main Content Area */}
      <div className="flex flex-1 flex-col overflow-hidden xl:flex-row">
        {/* Left Column: Chart & Info */}
        <div className="flex min-h-0 min-w-0 flex-1 flex-col border-border xl:border-r">
          <div className="flex-1 min-h-0">{chart}</div>
          {/* Future: Transaction History / Market Depth can go here */}
        </div>

        {/* Right Column: Order Book & Order Form */}
        <div className="flex min-h-0 w-full flex-none flex-col bg-background xl:w-[460px] 2xl:w-[500px]">
          {/* Top: Order Book (Hoga) */}
          <div className="min-h-[360px] flex-1 overflow-hidden border-t border-border xl:min-h-0 xl:border-t-0 xl:border-b">
            {orderBook}
          </div>

          {/* Bottom: Order Form */}
          <div className="flex-none h-[320px] sm:h-[360px] xl:h-[380px]">
            {orderForm}
          </div>
        </div>
      </div>
    </div>
  );
}