import {
  PieChart,
  Pie,
  Cell,
  Label,
  Tooltip,
  ResponsiveContainer,
} from "recharts";
import { renderCustomTooltip } from "./CustomTooltip";
import { formatCompactNumber } from "@/lib/utils/getExpiryYears";

export const renderPieChart = (data: any, total: any,t:any) => {
  const fallbackColor = "#D1D5DB"; // Tailwind's gray-300 equivalent
  const chartData = total === 0 ? [{ name: "No Data", value: 1, color: fallbackColor }] : data;

  return (
    <div className="w-[170px] h-[170px] [&_g]:outline-none [&_path]:outline-none">
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie
            data={chartData}
            dataKey="value"
            innerRadius={40}
            outerRadius={70}
            startAngle={90}
            endAngle={-270}
            isAnimationActive={false}
          >
            {chartData.map((entry: any, index: number) => (
              <Cell key={`cell-${index}`} fill={entry.color} />
            ))}
            <Label
              position="center"
              content={() => (
                <text
                  x="50%"
                  y="50%"
                  textAnchor="middle"
                  dominantBaseline="middle"
                  className="text-[12px] dark:text-neutrals400 dark-text-spin dark:fill-neutrals400"
                >
                  <tspan
                    x="50%"
                    dy="-0.4em"
                    className="text-sm text-neutrals500 dark:fill-neutrals400"
                  >
                    {t("total")}
                  </tspan>
                  <tspan
                    x="50%"
                    dy="1.4em"
                    className="text-xl font-semibold text-black dark:fill-neutrals400 max-lg:text-lg max-md:text-base"
                  >
                    {formatCompactNumber(total)}
                  </tspan>
                </text>
              )}
            />
          </Pie>

          {total > 0 && <Tooltip content={renderCustomTooltip} />}
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
};