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) {
    return null;
  }

  const data = payload[0].payload;
  const value = Number(data.value || 0);

  const percentage =
    data.percentage !== undefined
      ? Number(data.percentage).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(value)}</span>
      </p>

      <p className="text-sm text-slate-600">
        Percentage: <span className="font-medium">{percentage}%</span>
      </p>
    </div>
  );
};