import Dinero from "dinero.js";

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div
        style={{
          backgroundColor: "white",
          border: "1px solid gray",
          padding: "0.5rem"
        }}
      >
        <p style={{ margin: "0" }}>{label}</p>
        {payload.map((data, index) => {
          if (data.dataKey === "sales" || data.dataKey === "accSales")
            return (
              <p style={{ margin: "10px 0", color: data.color }} key={index}>{`${data.name} : ${Dinero({
                amount: Math.round(data.value * 100)
              }).toFormat()}`}</p>
            );

          return <p style={{ margin: "10px 0", color: data.color }} key={index}>{`${data.name} : ${data.value}`}</p>;
        })}
      </div>
    );
  }

  return null;
};

export default CustomTooltip;
