import React, { Suspense } from 'react';
import { Spin } from 'antd';

// Lazy load chart components to reduce initial bundle size
const LazyBar = React.lazy(() => import('react-chartjs-2').then(module => ({ default: module.Bar })));
const LazyDoughnut = React.lazy(() => import('react-chartjs-2').then(module => ({ default: module.Doughnut })));

interface ChartLoaderProps {
  type: 'bar' | 'doughnut';
  data: any;
  options?: any;
  [key: string]: any;
}

const ChartLoader: React.FC<ChartLoaderProps> = ({ type, ...props }) => {
  const ChartComponent = type === 'bar' ? LazyBar : LazyDoughnut;
  
  return (
    <Suspense fallback={<Spin size="large" />}>
      <ChartComponent {...props} />
    </Suspense>
  );
};

export default ChartLoader; 