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


const Pix = () => {

  useEffect(()=>{
    const cep = document.querySelector(".vtex-address-form-4-x-input");

    cep?.setAttribute("placeholder", "Digite seu CEP");

  })

const productvalue = useProduct();

const pixproduct = productvalue?.product?.priceRange?.sellingPrice?.lowPrice;

const desconto = (Number(pixproduct)*10)/100;

const total = Number(pixproduct) - Number(desconto.toFixed(2))

return (

<div className={styles["pix-container"]}>
<div className={styles["pix-content"]}>
  <div className={styles["pix-img"]}>
  <img src="https://agenciamagma.vtexassets.com/arquivos/pix--ueberjames.png" alt="" />
  </div>
<div className={styles["pix-desconto"]}>
  <p className={styles["pix-valor"]}> R$ { total.toFixed(2)}</p>
  <p className={styles["pix-text"]}> 10% de desconto</p>
  </div>

</div>
</div>




);

};

export default Pix;