{
  "name": "order-detail-page",
  "title": "OrderDetailPage",
  "description": "Single order detail view with live status polling.",
  "type": "component",
  "registryDependencies": [
    "order-summary",
    "cn"
  ],
  "files": [
    {
      "path": "order-detail-page.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, LineItem, OrderStatus } from \"@cimplify/sdk\";\nimport { OrderSummary } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderDetailPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  backButton?: string;\n  summary?: string;\n}\n\nexport interface OrderDetailPageProps {\n  /** Order ID to display. */\n  orderId: string;\n  /** Pre-fetched order for SSR. */\n  order?: Order;\n  /** Poll for status updates. Default: true. */\n  poll?: boolean;\n  /** Called when back button is clicked. */\n  onBack?: () => void;\n  /** Custom line item renderer. */\n  renderLineItem?: (item: LineItem) => React.ReactNode;\n  /** Called when the reorder button is clicked. */\n  onReorder?: (order: Order) => void;\n  /** Called when the order status changes during polling. */\n  onStatusChange?: (previousStatus: OrderStatus, newStatus: OrderStatus, order: Order) => void;\n  /** Back button label. */\n  backLabel?: string;\n  className?: string;\n  classNames?: OrderDetailPageClassNames;\n}\n\n/**\n * OrderDetailPage — single order detail view with live status polling.\n *\n * SSR-friendly: pass `order` prop for server rendering.\n */\nexport function OrderDetailPage({\n  orderId,\n  order,\n  poll = true,\n  onBack,\n  renderLineItem,\n  onReorder,\n  onStatusChange,\n  backLabel = \"Back to orders\",\n  className,\n  classNames,\n}: OrderDetailPageProps): React.ReactElement {\n  return (\n    <div data-cimplify-order-detail-page className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-order-detail-header className={classNames?.header}>\n        {onBack && (\n          <button\n            type=\"button\"\n            onClick={onBack}\n            data-cimplify-order-detail-back\n            className={classNames?.backButton}\n          >\n            {backLabel}\n          </button>\n        )}\n        <h1 data-cimplify-order-detail-title className={classNames?.title}>\n          Order Details\n        </h1>\n      </div>\n\n      {/* Order summary */}\n      <div data-cimplify-order-detail-content className={classNames?.summary}>\n        <OrderSummary\n          order={order}\n          orderId={order ? undefined : orderId}\n          poll={poll}\n          renderLineItem={renderLineItem}\n          onReorder={onReorder}\n          onStatusChange={onStatusChange}\n        />\n      </div>\n    </div>\n  );\n}\n"
    }
  ]
}