'use client';

import dynamic from 'next/dynamic';

// @stoplight/elements accesses `document` at module load time,
// so it must be imported client-side only (ssr: false).
const ElementsAPI = dynamic(
  async () => {
    await import('@stoplight/elements/styles.min.css');
    const mod = await import('@stoplight/elements');
    return mod.API;
  },
  { ssr: false },
);

export default function ApiExplorerPage() {
  return (
    <main className="h-screen w-full">
      <ElementsAPI
        apiDescriptionUrl={`${process.env.NEXT_PUBLIC_API_URL}/openapi.json`}
        router="hash"
        layout="sidebar"
        hideSchemas={false}
        tryItCredentialsPolicy="same-origin"
      />
    </main>
  );
}