import { TooltipProps } from "recharts";

 export const renderCustomTooltip = ({
  active,
  payload,
}: TooltipProps<number, string>) => {
  if (active && payload && payload.length) {
    const entry = payload[0].payload as {
      name: string;
      value: number | string;
      color?: string;
    };

    return (
      <div className="bg-white border border-gray-200 rounded-md shadow p-2 text-sm dark:border-darkborder dark:bg-background">
        <p className="text-gray-600 dark:text-neutrals400">Access From</p>
        <p className="flex items-center gap-2">
          <span
            className="w-2 h-2 rounded-full"
            style={{ backgroundColor: entry.color }}
          ></span>
          <span className="text-gray-700 dark:text-neutrals300">
            {entry.name}
          </span>
          <span className="font-semibold text-black ml-auto dark:text-neutrals400">
            {entry.value}
          </span>
        </p>
      </div>
    );
  }
  return null;
};