'use client';

import { Suspense, lazy, ComponentType } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
import { Loader2 } from 'lucide-react';

interface LazyTileProps {
  component: ComponentType<any>;
  props?: any;
  fallback?: React.ReactNode;
}

export function LazyTile({ component: Component, props, fallback }: LazyTileProps) {
  const LazyComponent = lazy(() => Promise.resolve({ default: Component }));

  const defaultFallback = (
    <Card className="bg-gray-800 border-gray-700">
      <CardHeader>
        <CardTitle className="text-white">Loading...</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex items-center justify-center py-8">
          <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
        </div>
      </CardContent>
    </Card>
  );

  return (
    <Suspense fallback={fallback || defaultFallback}>
      <LazyComponent {...props} />
    </Suspense>
  );
}

