import {SEMI_TRANSPARENT} from "@/resources/colors";
import {Chart as ChartJS, RadialLinearScale, ArcElement, Tooltip, Legend} from "chart.js";
import clsx from "clsx";
import {PolarArea} from "react-chartjs-2";
import {Chart} from "primereact/chart";

interface Props {
	data: {label: string; value: number}[];
	label?: string;
	title: string;
	type: string;
	colors?: string[];
}

ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);

export default function SingleDatasetChart({data, type, label, title, colors = Object.values(SEMI_TRANSPARENT)}: Props) {
	const labels = data.map((x) => x.label);
	const chartData = {
		labels,
		datasets: [
			{
				label,
				data: data.map((x) => x.value),
				backgroundColor: colors,
			},
		],
	};

	return <Chart type={type} data={chartData} options={{plugins: {title: {text: title, display: true}}}} />;
}