'use client';

import React, { Suspense, ComponentType, ReactNode } from 'react';
import { Spin } from 'antd';

interface LazyComponentProps {
    children: ReactNode;
    fallback?: ReactNode;
}

export function LazyComponent({ children, fallback }: LazyComponentProps) {
    return (
        <Suspense
            fallback={
                fallback || (
                    <Spin
                        size="large"
                        style={{ display: 'block', textAlign: 'center', padding: '50px' }}
                    />
                )
            }
        >
            {children}
        </Suspense>
    );
}

/**
 * HOC para lazy loading de componentes
 */
export function withLazyLoading<P extends object>(
    Component: ComponentType<P>,
    fallback?: ReactNode
) {
    return function LazyLoadedComponent(props: P) {
        return (
            <LazyComponent fallback={fallback}>
                <Component {...props} />
            </LazyComponent>
        );
    };
}