'use client'

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

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

	return (
		<div
			className="flex flex-col items-center"
		>
			<ResponsiveContainer width={200} height={200}>
				<PieChart>
					<text x={100} y={75} className="pie-char-text">
						{show}
					</text>
					<text x={100} y={100} className="pie-char-text">
						{t('out-of')}
					</text>
					<text x={100} y={125} className="pie-char-text">
						0
					</text>
					<Pie
						data={data}
						cx="50%"
						cy="50%"
						innerRadius={65}
						outerRadius={100}
						paddingAngle={0}
						dataKey="value"
						stroke="none"
					>
						{data.map((entry, index) => (
							<Cell key={`cell-${index}`} fill={entry.color} stroke="none" />
						))}
					</Pie>
				</PieChart>
			</ResponsiveContainer>
			<div className="flex gap-6 mt-4">
				{data.map((entry, index) => (
					<div key={`cell-${index}`} className="">
						<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>
	)
};