export const CustomTooltip = ({ active, payload }: any) => {
  if (active && payload && payload.length) {
    const data = payload[0].payload;
    return (
      <div className="bg-white p-3 border border-slate-200 rounded-lg shadow-lg">
        <p className="text-sm font-semibold text-slate-900">{data.label}</p>
        <p className="text-xs text-slate-600 mt-1">{data.percentage}%</p>
        <p className="text-xs text-slate-600">{data.formattedAmount}</p>
      </div>
    );
  }
  return null;
};