import { useEffect, useRef } from 'react';
import { config } from '../../config';

export default function SwaggerPage() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let cleanup: (() => void) | undefined;

    import('swagger-ui-dist/swagger-ui-bundle').then(({ default: SwaggerUIBundle }) => {
      if (!containerRef.current) return;
      SwaggerUIBundle({
        url: `${config.apiBaseUrl}/api-docs`,
        domNode: containerRef.current,
        presets: [],
        layout: 'BaseLayout',
      });
    });

    return () => cleanup?.();
  }, []);

  return (
    <div>
      <h2 style={{ marginBottom: '1rem' }}>API Documentation</h2>
      <div ref={containerRef} />
    </div>
  );
}