import React, { useState } from 'react';
import { Pie } from 'react-chartjs-2'; // Import Pie chart from react-chartjs-2
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';

//  Register required elements for Pie chart

const PieChartComponent = () => {
  // Define pie chart data and labels
  const [pieChartData] = useState([30, 50, 20]);
  const [pieChartLabels] = useState(['SciFi', 'Drama', 'Comedy']);
  const [pieChartType] = useState('pie');

  // Handle chart hover and click events
  const chartClicked = (e) => {
    console.log(e);
  };

  const chartHovered = (e) => {
    console.log(e);
  };

  return (
    <div style={{ display: 'block' }}>
      <Pie
        data={{
          labels: pieChartLabels,
          datasets: [
            {
              data: pieChartData,
              backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'], // Customize the colors
            },
          ],
        }}
        type={pieChartType}
        onHover={chartHovered}
        onClick={chartClicked}
      />
    </div>
  );
};

export default PieChartComponent;
