import React from "react";
import { useProduct } from "vtex.product-context";

const Pix = () => {
  const productContextValue = useProduct()?.product?.priceRange?.sellingPrice
    ?.highPrice;

  return (
    <>
      <div className="pix-container">
        <div className="pix-img">
          <img
            src="https://agenciamagma.vtexassets.com/arquivos/pix_izabela.svg"
            alt="Pix"
          />
        </div>
        <div className="pix-preco">
          {`R$ ${(productContextValue! - productContextValue! * 0.1)
            .toFixed(2)
            .replace(".", ",")}`}
        </div>
      </div>
      <p>10% de desconto</p>
    </>
  );
};

export default Pix;