import React, { useEffect } from "react";

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

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

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

      console.log(cepInput);
    }, 1000);
  }, []);

  const productContextValue = useProduct();

  const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice;

  const discountValue = (Number(productPrice) * 10) / 100;

  const totalValue = Number(productPrice) - Number(discountValue);

  return (
    <div className={styles["wrapper"]}>
      <div className={styles["container-flex"]}>
        <div className={styles["image"]}>
          <img src="https://agenciamagma.vtexassets.com/arquivos/pix-logo-vitor-soares.png" alt="desconto" />
        </div>
        <div className={styles["discount"]}>
          <p className={styles["value"]}>R${totalValue.toFixed(2).replace(".", ",")}</p>
          <p className={styles["text"]}>10 % de desconto</p>
        </div>
      </div>
    </div>
  );
};

export default Pix;