import React, { useState } from 'react';
import { Radar } from 'react-chartjs-2'; // Import Radar chart from react-chartjs-2
import { Chart as ChartJS, RadarElement, Tooltip, Legend, PointElement, LineElement } from 'chart.js';

// ChartJS.register(RadarElement, Tooltip, Legend, PointElement, LineElement); // Register required chart elements for Radar chart

const RadarChartComponent = () => {
  // Define radar chart data, labels, and type
  const [radarChartLabels] = useState([
    'Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'
  ]);
  
  const [radarChartData] = useState([
    { data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B' }
  ]);
  
  const [radarChartType] = useState('radar');

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

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

  return (
    <div style={{ display: 'block' }}>
      <Radar
        data={{
          labels: radarChartLabels,
          datasets: radarChartData,
        }}
        type={radarChartType}
        onHover={chartHovered}
        onClick={chartClicked}
      />
    </div>
  );
};

export default RadarChartComponent;
