src/components/AIVisualization.tsx

import { Bar, Pie, Line } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  LineElement,
  PointElement,
  ArcElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  LineElement,
  PointElement,
  ArcElement,
  Title,
  Tooltip,
  Legend
);

interface AIVisualizationProps {
  visualization: {
    type: 'bar' | 'pie' | 'line' | 'doughnut';
    config: any;
  };
}

export default function AIVisualization({ visualization }: AIVisualizationProps) {
  const ChartComponent = {
    bar: Bar,
    pie: Pie,
    line: Line,
    doughnut: Pie  
  }[visualization.type];

  if (!ChartComponent) return null;

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'top' as const,
      },
      title: {
        display: true,
        text: 'Data Visualization'
      }
    },
    ...(visualization.type === 'doughnut' && {
      cutout: '50%' 
    })
  };

  return (
    <div className="w-full h-[400px]">
      <ChartComponent
        data={visualization.config}
        options={options}
      />
    </div>
  );
}