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

export default function Prices() {
  const product = useProduct();
  console.log(product);
  return (
    <div>
      <span className={styles.fullPrice}>
        R${" "}
        {product?.selectedItem?.sellers[0].commertialOffer.Installments[3].TotalValuePlusInterestRate.toString().replace(
          ".",
          ","
        )}{" "}
      </span>
      <div className={styles.installmentsNumber}>
        <span className={styles.BiginstallmentsNumberText}>
          {
            product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
              .NumberOfInstallments
          }{" "}
          x
        </span>
        <span className={styles.installmentsNumberText}> de </span>
        <span className={styles.BiginstallmentsNumberText}>
          R${" "}
          {product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toString().replace(
            ".",
            ","
          )}
        </span>
        <span className={styles.installmentsNumberText}> sem juros</span>
      </div>
      <div className={styles.pixWrapper}>
        <img className={styles.pixImage}
          src="https://agenciamagma.vteximg.com.br/arquivos/pix-daviklein.svg"
          alt="pix-image"
        />
        <div className={styles.PixValues}>
          <span className={styles.PixValuesPrice}>
            R${" "}
            {(
              Number(
                product?.selectedItem?.sellers[0].commertialOffer
                  .Installments[0].TotalValuePlusInterestRate
              ) * 0.9
            )
              .toFixed(2)
              .toString()
              .replace(".", ",")}
          </span>
          <span className={styles.PixValuesText}>10 % de desconto</span>
        </div>
      </div>
    </div>
  );
}