import React from 'react';
import {
  PieChart,
  Pie,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Cell,
  LabelList,
} from 'recharts';

const data = [
  { name: 'Group A', value: 400 },
  { name: 'Group B', value: 300 },
  { name: 'Group C', value: 300 },
  { name: 'Group D', value: 200 },
];

// Reuse the same color palette as the bar chart
const COLORS = ['#4F46E5', '#EF4444', '#10B981', '#F59E0B'];

const CircleChartComponent = () => {
  // Handle click event for interactivity
  const handlePieClick = (data) => {
    console.log('Clicked on:', data);
    alert(`You clicked on ${data.name} with value ${data.value}`);
  };

  return (
    <div className="w-full h-96 bg-white p-6 rounded-lg shadow-md">
      <h2 className="text-xl font-bold text-gray-800 mb-4">Sales Distribution</h2>
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          {/* Pie Chart */}
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            innerRadius={60} // Creates a donut chart effect
            outerRadius={80}
            paddingAngle={2}
            dataKey="value"
            onClick={handlePieClick} // Add interactivity
            cursor="pointer" // Add cursor pointer effect
          >
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
            {/* Display values inside the pie chart */}
            <LabelList dataKey="value" position="inside" />
          </Pie>

          {/* Tooltip */}
          <Tooltip contentStyle={{ backgroundColor: '#ffffff', border: '1px solid #cccccc' }} />

          {/* Legend (Vertical Layout on the Left) */}
          <Legend
            layout="vertical" // Makes the legend vertical
            align="left" // Aligns the legend to the left
            verticalAlign="middle" // Centers the legend vertically
            wrapperStyle={{ paddingLeft: '20px' }} // Adds spacing between the chart and the legend
          />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
};

export default CircleChartComponent;