import type React from 'react';
import { Chart } from 'react-google-charts';

export type OptionsModule = {
	title: string;
	pieHole: number;
	is3D: boolean;
};

export type DataArray = [string, string | number][];
export type DataObjectArray = [
	label: string,
	value: string | number,
	suffix?: string,
	style?: string
][];
const TwoRowPieChart: React.FC<{ data: DataArray; options: OptionsModule }> = ({
	data,
	options
}) => {
	const rootStyles = getComputedStyle(document.documentElement);
	const blueDarkColor = rootStyles.getPropertyValue('--cc-blue-dark').trim();
	const grayDarkColor = rootStyles.getPropertyValue('--cc-gray-dark').trim();
	const pinkMediumColor = rootStyles.getPropertyValue('--cc-pink-medium').trim();
	const colors = [pinkMediumColor, grayDarkColor, blueDarkColor];

	return (
		<Chart
			chartType="PieChart"
			data={data}
			height="300px"
			options={{ ...options, colors }}
			width="100%"
		/>
	);
};
export default TwoRowPieChart;