"use client";

import { useEffect, useState } from 'react';
import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

export default function ApiDocsPage() {
    const [spec, setSpec] = useState<any>(null);

    useEffect(() => {
        const fetchSpec = async () => {
            try {
                const res = await fetch('/api/swagger');
                if (!res.ok) throw new Error('Failed to fetch spec');
                const data = await res.json();
                setSpec(data);
            } catch (error) {
                console.error('Error fetching swagger spec:', error);
            }
        }
        void fetchSpec();
    }, []);

    if (!spec) return <div className="p-8">Cargando documentación...</div>;

    return (
        <div className="bg-white min-h-screen">
            <SwaggerUI spec={spec} />
        </div>
    );
}