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

const PixDiscount = () => {

  useEffect(() => {
    const inputCep = document.querySelector(".vtex-address-form-4-x-input");
    inputCep?.setAttribute("placeholder", "Digite seu CEP");
  });

  const productContextValue = useProduct();
  const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;
  const discount = (Number(productPrice) * 10) / 100;
  const totalDiscount = Number(productPrice) - Number(discount.toFixed(2));


  return (
    <div className={styles["wrapper"]}>
      <div className={styles["container-img"]}>
        <figure className={styles["figure-pix"]}>
          <img className={styles["img-pix"]} src="https://agenciamagma.vtexassets.com/arquivos/pixDescontoThiagoBronisio.png" alt="Imagem Pix" />
        </figure>
      </div>

      <div className={styles["container-price"]}>
        <p className={styles["price-pix"]}>R$ {totalDiscount.toFixed(2).replace(".", ",")}</p>
        <p className={styles["discount"]}>10% de desconto</p>
      </div>
    </div>
  )
}

export default PixDiscount;