import { Helmet } from "react-helmet-async";
import SwaggerUI from "swagger-ui-react";
import { PageSkeleton } from "#components/pages";

// TODO: path alias it after moving out of server folder
import schema from "../../../../schema/public/api.yaml";

import "swagger-ui-react/swagger-ui.css";
import * as styles from "./api.module.scss";

export function Component() {
  const title = "API documenation";
  const heading = "API Documenation";

  return (
    <PageSkeleton name="" title={title} heading={heading}>
      <Helmet>
        <meta name="description" content="SwaggerUI" />
      </Helmet>
      <div className={styles.block}>
        <SwaggerUI spec={schema} />
      </div>
    </PageSkeleton>
  );
}

Component.displayName = "APIDocumentationPage";