import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./Pix.module.css";

const Pix = () => {
  const price = useProduct()?.product?.priceRange?.sellingPrice?.highPrice;
  const discount = (Number(price) * 10) / 100;
  const priceWithDiscount = Number(price) - Number(discount);
  return (
    <div className={styles.containerPix}>
      <img
        src="https://agenciamagma.vtexassets.com/arquivos/pix-cainamilech.png"
        alt="Imagem do pix"
      />
      <div>
        <p>R$ {priceWithDiscount.toFixed(2)}</p>
        <p>10 % de desconto</p>
      </div>
    </div>
  );
};

export default Pix;