vtorio/app/api-docs/page.tsx

'use client';

import { useEffect } from 'react';

export default function ApiDocs() {
  useEffect(() => {
    // Load Scalar API Reference dynamically
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/@scalar/api-reference@latest/dist/browser/standalone.js';
    script.async = true;
    document.body.appendChild(script);

    const style = document.createElement('link');
    style.rel = 'stylesheet';
    style.href = 'https://cdn.jsdelivr.net/npm/@scalar/api-reference@latest/dist/browser/style.css';
    document.head.appendChild(style);

    return () => {
      document.body.removeChild(script);
      document.head.removeChild(style);
    };
  }, []);

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-5 sm:p-6">
            <h1 className="text-2xl font-bold text-gray-900 mb-4">
              Vtorio API Documentation
            </h1>
            <p className="text-gray-600 mb-6">
              Interactive API documentation for file upload and management endpoints.
            </p>
            <div 
              id="api-reference"
              data-url="/api/openapi.json"
              data-theme="default"
              style={{ height: 'calc(100vh - 200px)' }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}