import React from "react";
import { TooltipContentProps } from "recharts";
import { formatNumber } from "@/lib/structured-products-utils";

export const CustomPieTooltip = ({ active, payload }: TooltipContentProps<number, string>) => {
  if (active && payload && payload.length) {
    const data = payload[0].payload;
    const total = payload[0].payload.total || 0;
    const percentage = total > 0 ? ((data.y / total) * 100).toFixed(2) : "0.00";
    return (
      <div className="rounded-lg border border-slate-200 bg-white p-3 shadow-lg">
        <p className="font-semibold text-slate-900">{data.name}</p>
        <p className="text-sm text-slate-600">
          Value: <span className="font-medium">{formatNumber(data.y)}</span>
        </p>
        <p className="text-sm text-slate-600">
          Percentage: <span className="font-medium">{percentage}%</span>
        </p>
      </div>
    );
  }
  return null;
};