import React from "react";

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

const Pix = () => {
  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"]}>
        <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)}</p>
          <p className={styles["text"]}>10 % de desconto</p>
        </div>
      </div>
    </div>
  );
};

export default Pix;