const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div
        style={{
          backgroundColor: "var(--tooltip-bg)",
          border: "1px solid var(--tooltip-border)",
          padding: "0.5rem"
        }}
      >
        <p style={{ margin: "0" }}>{label}</p>
        {payload.map((data, index) => {
          const textColor = data.color || "var(--tooltip-text-fallback)";
          return (
            <p style={{ margin: "10px 0", color: textColor }} key={index}>{`${
              data.name
            } : ${data.value.toFixed(1)}`}</p>
          );
        })}
      </div>
    );
  }
  return null;
};

export default CustomTooltip;
