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

const Pix = () => {
  const product = useProduct();
  const pix = {
    pix: Number(
      product?.selectedItem?.sellers[0].commertialOffer.Installments[0].Value
    ),
  };
  const discount = pix.pix * 0.1;
  const pixPrice = pix.pix - discount;

  return (
    <div className={styles.PixContent}>
      <img
        className={styles.ImgPixContent}
        src="https://agenciamagma.vteximg.com.br/arquivos/icon-pix-anacarolinaduartecavalcante-m3academy.svg"
        alt="logo pix"
      />
      <div className={styles.PixDiscount}>
        <strong>
          R$&nbsp;{pixPrice?.toFixed(2).toString().replace(".", ",")}
        </strong>
        <span>10 % de desconto</span>
      </div>
    </div>
  );
};

export default Pix;