Projects/front/src/components/async/BandwidthAdaptiveWrapper.tsx

// src/components/async/BandwidthAdaptiveWrapper.tsx
import { useBandwidthDetection } from "@/hooks/useBandwidthDetection";
import { AlertTriangle, Zap, Wifi, ImageOff } from "lucide-react";

interface BandwidthAdaptiveWrapperProps {
  children: React.ReactNode;
  minimalFallback?: React.ReactNode;
  reducedFallback?: React.ReactNode;
}

export function BandwidthAdaptiveWrapper({
  children, minimalFallback, reducedFallback,
}: BandwidthAdaptiveWrapperProps) {
  const { bandwidthMode, estimatedSpeed } = useBandwidthDetection();

  if (bandwidthMode === "minimal" && minimalFallback) {
    return (
      <div>
        <div className="mb-2 flex items-center gap-2 text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-3 py-1.5 rounded-lg">
          <Wifi className="w-3.5 h-3.5" />
          <span>Low bandwidth mode ({estimatedSpeed.toFixed(1)} Mbps) — simplified view</span>
        </div>
        {minimalFallback}
      </div>
    );
  }

  if (bandwidthMode === "reduced" && reducedFallback) {
    return (
      <div>
        <div className="mb-2 flex items-center gap-2 text-xs text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 px-3 py-1.5 rounded-lg">
          <Zap className="w-3.5 h-3.5" />
          <span>Reduced quality — images and videos compressed</span>
        </div>
        {reducedFallback}
      </div>
    );
  }

  return <>{children}</>;
}