"use client";

import { Suspense, useEffect } from 'react';
import dynamic from 'next/dynamic';

// Dynamically import the 3D stats component
const StatsSection = dynamic(() => import('./StatsSection'), { 
  ssr: false,
  loading: () => <div className="h-40 w-full bg-gray-900 animate-pulse rounded-lg"></div>
});

export default function ClientStatsWrapper({ stats }: { stats: any }) {
  // Debug the stats to see what's being passed
  useEffect(() => {
    console.log('Stats data received in client component:', stats);
  }, [stats]);

  // Apply defaults if stats is undefined
  const safeStats = stats || {
    totalProducts: 0,
    totalVendors: 0,
    totalOrders: 0,
    totalCustomers: 0,
    gmv: 0
  };

  return (
    <Suspense fallback={<div className="h-40 w-full bg-gray-900 animate-pulse rounded-lg"></div>}>
      <StatsSection stats={safeStats} />
    </Suspense>
  );
}