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: ['COD', 'Pay Latter', 'kredit', 'Bank', 'E-Monoy'],
  datasets: [
    {
      data: [12, 50, 10, 20, 70],
      backgroundColor: 'rgba(54, 162, 235, 0.6)',
    },

  ],  
};

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
  },
};

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

export default BarChartPayment;
