import { lazy, Suspense, ComponentType, ReactNode } from 'react';

// Utility to create lazy loaded components with error boundary
export function lazyWithPreload<T extends ComponentType<any>>(
  importFn: () => Promise<{ default: T }>
) {
  const LazyComponent = lazy(importFn);
  
  // Add preload method
  (LazyComponent as any).preload = importFn;
  
  return LazyComponent;
}

// Default loading component
const DefaultLoader = () => (
  <div className="flex justify-center items-center h-32">
    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
  </div>
);

// Wrapper component with loading fallback
export function LazyLoad({
  component: Component,
  fallback = <DefaultLoader />,
  ...props
}: {
  component: ComponentType<any>;
  fallback?: ReactNode;
  [key: string]: any;
}) {
  return (
    <Suspense fallback={fallback}>
      <Component {...props} />
    </Suspense>
  );
}

// Preload components on hover/focus
export function preloadComponent(component: any) {
  if (component.preload) {
    component.preload();
  }
}