import React from 'react';
import { Box } from '@mui/material';
import { Bar } from 'react-chartjs-2';
import { registerChartJS, commonChartOptions } from './chartutils';

registerChartJS();

const BarChart = () => {
  const data = {
    labels: ['Apple', 'Banana', 'Kiwifruit', 'Blueberry', 'Orange', 'Grapes'],
    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 = {
    ...commonChartOptions,
    plugins: {
      title: {
        display: true,
        text: 'Bar Chart',
      },
    },
  };

  return (
    <Box sx={{ height: 400 }}>
      <Bar data={data} options={options} />
    </Box>
  );
};

export default BarChart;