import { ApiReferenceReact } from '@scalar/api-reference-react'

export default function ApiDocs() {
  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">
            <div className="mb-4">
              <h1 className="text-2xl font-bold text-gray-900">
                Vtorio API Documentation
              </h1>
              <p className="text-gray-600 mt-2">
                Interactive API documentation for file upload and management endpoints.
              </p>
            </div>
            <ApiReferenceReact 
              configuration={{
                url: '/api/openapi.json',
                theme: 'default',
                layout: 'modern'
              }}
            />
          </div>
        </div>
      </div>
    </div>
  )
}