"use client";

import { Suspense, lazy } from "react";

interface LazyLoadProps {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}

const LazyLoad: React.FC<LazyLoadProps> = ({ 
  children, 
  fallback = (
    <div className="flex items-center justify-center p-8">
      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
    </div>
  ) 
}) => {
  return (
    <Suspense fallback={fallback}>
      {children}
    </Suspense>
  );
};

// Lazy load specific heavy components
export const LazyChart = lazy(() => import("react-apexcharts").then(module => ({ default: module.default || module })));
export const LazyMap = lazy(() => import("@react-google-maps/api").then(module => ({ default: module.GoogleMap || module })));
export const LazyPlayer = lazy(() => import("react-player").then(module => ({ default: module.default || module })));

export default LazyLoad;