'use client';

import React from 'react';
import dynamic from 'next/dynamic';
import type { SwaggerUIProps } from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

// Dynamically import SwaggerUI with no SSR — SwaggerUI requires browser globals
const SwaggerUI = dynamic<SwaggerUIProps>(() => import('swagger-ui-react'), {
  ssr: false,
});

interface SwaggerExplorerProps {
  apiUrl: string;
}

const SUBMIT_METHODS: SwaggerUIProps['supportedSubmitMethods'] = [
  'get',
  'post',
  'put',
  'patch',
  'delete',
];

export function SwaggerExplorer({
  apiUrl,
}: SwaggerExplorerProps): React.ReactElement {
  const specUrl = `${apiUrl}/openapi.json`;

  return (
    <div className="swagger-wrapper min-h-screen">
      <SwaggerUI
        url={specUrl}
        persistAuthorization={true}
        supportedSubmitMethods={SUBMIT_METHODS}
      />
    </div>
  );
}