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

// Register Chart.js components
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [
    {
      label: 'Stock',
      data: [120, 150, 180, 200, 170, 210, 250, 220, 190, 240, 280, 260],
      backgroundColor: 'rgba(54, 162, 235, 0.6)',
    },
    {
      label: 'Sales',
      data: [100, 130, 160, 180, 150, 190, 230, 200, 170, 220, 260, 240],
      backgroundColor: 'rgba(255, 99, 132, 0.6)',
    },
  ],
};

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Data stocks & Sales',
    },
  },
};

const BarChart = () => {
  return (
    <div className="w-full mx-auto max-w-screen-lg ">
      <Bar data={data} options={options} />
    </div>
  );
};

export default BarChart;
