import Dinero from "dinero.js";

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)";
          if (data.dataKey === "sales" || data.dataKey === "accSales")
            return (
              <p style={{ margin: "10px 0", color: textColor }} key={index}>{`${data.name} : ${Dinero({
                amount: Math.round(data.value * 100)
              }).toFormat()}`}</p>
            );
          return <p style={{ margin: "10px 0", color: textColor }} key={index}>{`${data.name} : ${data.value}`}</p>;
        })}
      </div>
    );
  }
  return null;
};

export default CustomTooltip;
