"use client";

import dynamic from "next/dynamic";
import { useMemo } from "react";

import { API_BASE } from "@/lib/api";

const SwaggerUI = dynamic(() => import("swagger-ui-react"), { ssr: false });

export default function ApiDocsPage() {
  const specUrl = useMemo(() => `${API_BASE}/api/openapi.json`, []);

  return (
    <main className="mx-auto max-w-7xl px-6 py-6">
      <h1 className="mb-4 text-2xl font-semibold">API 文档（Swagger）</h1>
      <div className="rounded-xl border bg-white p-2">
        <SwaggerUI url={specUrl} docExpansion="list" defaultModelsExpandDepth={1} />
      </div>
    </main>
  );
}