import React from "react";
import Layout from "@theme/Layout";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import useBaseUrl from "@docusaurus/useBaseUrl";
import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";

function APIBrowser() {
    const context = useDocusaurusContext();
    const { siteConfig = {} } = context;
    return (
        <Layout title="API Browser" description={siteConfig.tagline}>
            <BrowserOnly>
                {() => {
                    import("rapidoc");
                    return (
                        <rapi-doc
                            spec-url={useBaseUrl("schema.yaml")}
                            allow-try="false"
                            show-header="false"
                            theme="dark"
                            render-style="view"
                            primary-color="#fd4b2d"
                            allow-spec-url-load="false"
                            allow-spec-file-load="false"
                        ></rapi-doc>
                    );
                }}
            </BrowserOnly>
        </Layout>
    );
}

export default APIBrowser;