import React, { Suspense, memo } from 'react';
import { useLazyWidget } from '@/hooks/useLazyWidget';
import { Skeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';

interface LazyWidgetProps {
  children: React.ReactNode;
  className?: string;
  fallback?: React.ReactNode;
  delay?: number;
}

function WidgetSkeleton({ className }: { className?: string }) {
  return (
    <div className={cn('rounded-lg border border-border/50 bg-card/50 p-4', className)}>
      <Skeleton className="h-4 w-1/3 mb-4" />
      <Skeleton className="h-24 w-full mb-2" />
      <Skeleton className="h-3 w-2/3" />
    </div>
  );
}

export const LazyWidget = memo(function LazyWidget({ 
  children, 
  className,
  fallback,
  delay = 0 
}: LazyWidgetProps) {
  const { ref, isVisible, hasLoaded } = useLazyWidget({ delay });

  return (
    <div ref={ref} className={cn('min-h-[100px]', className)}>
      {hasLoaded ? (
        <Suspense fallback={fallback || <WidgetSkeleton className={className} />}>
          {children}
        </Suspense>
      ) : (
        fallback || <WidgetSkeleton className={className} />
      )}
    </div>
  );
});