/* eslint-disable react/no-array-index-key */
/* eslint-disable react/destructuring-assignment */
import { PieChart, Pie, Cell } from 'recharts';

const data = [
	{
		name: 'Group A',
		value: 400
	},
	{
		name: 'Group B',
		value: 300
	},
	{
		name: 'Group C',
		value: 300
	},
	{
		name: 'Group D',
		value: 200
	}
];
const COLORS = ['var(--primary-color)', '#59ff5bff', '#000'];

const WorkingCapitalCircleChart = (props: {
	className: string;
	firstData: number;
	secondData: number;
	thirdData: number;
}): JSX.Element => (
	<PieChart className={props.className} height={100} width={160}>
		<Pie
			cx={70}
			cy={120}
			data={[
					{
						name: 'Group A',
						value: props.firstData
					},
					{
						name: 'Group B',
						value: props.secondData
					},
					{
						name: 'Group C',
						value: props.thirdData
					},
					{
						name: 'Group C',
						value: props.thirdData
					}
				]}
			dataKey="value"
			endAngle={0}
			fill="#8884d8"
			innerRadius={60}
			outerRadius={80}
			paddingAngle={5}
			startAngle={180}
			>
			{data.map((entry, index) => (
				<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
				))}
		</Pie>
	</PieChart>
	);

export default WorkingCapitalCircleChart;