import type { ReactNode } from 'react';
import React, { Suspense } from 'react';

export function withFallback<P extends object>(
  Component: React.ComponentType<P>,
  fallback: ReactNode,
) {
  const Wrapped: React.FC<P> = (props) => {
    return (
      <Suspense fallback={fallback}>
        <Component {...props} />
      </Suspense>
    );
  };

  Wrapped.displayName = `withFallback(${Component.displayName! || Component.name || 'Component'
    })`;

  return Wrapped;
}