import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
  ChartData,
  ChartOptions,
} from 'chart.js';

import { Bar } from 'react-chartjs-2';

import styles from './BarChart.module.scss';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

interface BarChartOpts {
    className?: string;
    data: ChartData<"bar">;
    opts: ChartOptions<"bar">;
    title?: string;
}

export function BarChart({ className, data, opts, title }: BarChartOpts) {
    return (
        <div className={className}>
            {title && <h2 className={styles.title}>{title}</h2>}
            <Bar data={data} options={opts} />
        </div>
    );
}