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

interface MasterDetailLayoutProps {
  children: React.ReactNode;
  className?: string;
}

/**
 * MasterDetailLayout implements a side-by-side layout commonly used in dashboards
 * for a "Master" list (e.g., a table) and a "Detail" view (e.g., a side panel).
 */
export function MasterDetailLayout({ children, className }: MasterDetailLayoutProps) {
  return (
    <div className={cn("flex gap-6", className)}>
      {children}
    </div>
  );
}

interface MasterDetailLayoutMasterProps {
  children: React.ReactNode;
  isPending?: boolean;
  className?: string;
}

/**
 * The "Master" section of the layout, typically containing a table and pagination.
 */
MasterDetailLayout.Master = function MasterDetailLayoutMaster({
  children,
  isPending,
  className
}: MasterDetailLayoutMasterProps) {
  return (
    <div className={cn("flex-1 min-w-0", className)}>
       <div className={cn("transition-opacity duration-200", isPending ? "opacity-50" : "opacity-100")}>
         {children}
       </div>
    </div>
  );
};

interface MasterDetailLayoutDetailProps {
  children: React.ReactNode;
  className?: string;
}

/**
 * The "Detail" section of the layout, typically containing a side panel.
 * It has a fixed width and stays at the top of the viewport when scrolling.
 */
MasterDetailLayout.Detail = function MasterDetailLayoutDetail({
  children,
  className
}: MasterDetailLayoutDetailProps) {
  return (
    <div className={cn("w-96 flex-shrink-0 self-start", className)}>
      {children}
    </div>
  );
};