{
  "config": {
    "layout": {
      "id": "document-viewer-container",
      "styles": "width: 100%; height: 600px; font-family: system-ui, sans-serif; border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden; display: flex; flex-direction: column;",
      "components": [
        {
          "id": "document-header",
          "type": "div",
          "styles": "background-color: #1e293b; color: white; padding: 1rem;",
          "components": [
            {
              "id": "document-title",
              "type": "h2",
              "source": {
                "key": "OBJECT",
                "props": {
                  "object": {
                    "key": "DATA",
                    "path": "$.documentInfo.title"
                  }
                }
              },
              "styles": "margin: 0; font-size: 1.25rem; font-weight: 600;"
            }
          ]
        },
        {
          "id": "document-container",
          "type": "div",
          "styles": "flex: 1; display: flex;",
          "components": [
            {
              "id": "document-iframe",
              "type": "iframe",
              "source": {
                "key": "OBJECT",
                "props": {
                  "object": {
                    "key": "DATA",
                    "path": "$.documentInfo.documentUrl"
                  }
                }
              },
              "styles": "flex: 1; border: none;"
            }
          ]
        },
        {
          "id": "document-footer",
          "type": "div",
          "styles": "background-color: #f8fafc; padding: 0.75rem 1rem; border-top: 1px solid #e2e8f0; display: flex; justify-content: space-between; font-size: 0.875rem; color: #64748b;",
          "components": [
            {
              "id": "document-type",
              "type": "div",
              "styles": "",
              "components": [
                {
                  "id": "type-label",
                  "type": "span",
                  "value": "Document Type: ",
                  "styles": ""
                },
                {
                  "id": "type-value",
                  "type": "span",
                  "source": {
                    "key": "OBJECT",
                    "props": {
                      "object": {
                        "key": "DATA",
                        "path": "$.documentInfo.type"
                      }
                    }
                  },
                  "styles": "font-weight: 500;"
                }
              ]
            },
            {
              "id": "document-upload-info",
              "type": "div",
              "styles": "",
              "components": [
                {
                  "id": "upload-label",
                  "type": "span",
                  "value": "Uploaded: ",
                  "styles": ""
                },
                {
                  "id": "upload-value",
                  "type": "span",
                  "source": {
                    "key": "OBJECT",
                    "props": {
                      "object": {
                        "key": "DATA",
                        "path": "$.documentInfo.uploadedOn"
                      }
                    }
                  },
                  "styles": "font-weight: 500;"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}