import { useTranslations } from 'next-intl';
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';

export const PieChartComponent = ({ data }: {
	data: {
		name: string,
		value: number,
		color: string
	}[]
}) => {
	const t = useTranslations('Global');

	return (
		<div
			className="flex flex-col items-center"
		>
			<ResponsiveContainer width={200} height={200}>
				<PieChart>
					<text x={100} y={80} className="pie-char-text">
						0
					</text>
					<text x={100} y={100} className="pie-char-text">
						{t('out-of')}
					</text>
					<text x={100} y={120} className="pie-char-text">
						0
					</text>
					<Pie
						data={data}
						cx="50%"
						cy="50%"
						innerRadius={70}
						outerRadius={90}
						paddingAngle={0}
						dataKey="value"
					>
						{data.map((entry, index) => (
							<Cell key={`cell-${index}`} fill={entry.color} />
						))}
					</Pie>
				</PieChart>
			</ResponsiveContainer>
			<div className="flex gap-6">
				{data.map((entry, index) => (
					<div key={`cell-${index}`} className="text-white">
						<span className="w-2 h-2 rounded-full font-bold inline-block mr-1.5" style={{ backgroundColor: entry.color }}></span>
						<span>{t(entry.name)}</span>
					</div>
				))}
			</div>
		</div>
	)
};