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



const BarChart = () => {
  const barChartLabels = ['Apple', 'Banana', 'Kiwifruit', 'Blueberry', 'Orange', 'Grapes'];
  const barChartData = {
    labels: barChartLabels,
    datasets: [
      {
        label: 'Best Fruits',
        data: [45, 37, 60, 70, 46, 33],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1,
      },
    ],
  };

  const options = {
    responsive: true,
    plugins: {
      legend: {
        display: true,
        position: 'top',
      },
      tooltip: {
        enabled: true,
      },
    },
    scales: {
      x: {
        beginAtZero: true,
      },
      y: {
        beginAtZero: true,
      },
    },
  };

  const handleChartClick = (event, elements) => {
    if (elements.length > 0) {
      const { index } = elements[0];
      console.log(`Clicked on ${barChartLabels[index]}`);
    }
  };

  const handleChartHover = (event, elements) => {
    if (elements.length > 0) {
      console.log('Hovered on chart element:', elements);
    }
  };

  return (
    <div style={{ display: 'block', width: '600px', margin: 'auto' }}>
      <Bar
        data={barChartData}
        options={options}
        onClick={(event, elements) => handleChartClick(event, elements)}
        onHover={(event, elements) => handleChartHover(event, elements)}
      />
    </div>
  );
};

export default BarChart;
