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

const InstallmentProduct = () => {
  const product = useProduct();
  const productWithInstallments = {
    numberOfInstallments:
      product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
        .NumberOfInstallments,
    value:
      product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value,
  };
  return (
    <p className={styles.PriceContent}>
      <strong>{productWithInstallments.numberOfInstallments}x&nbsp;</strong>
      de&nbsp;
      <strong>
        R$&nbsp;
        {productWithInstallments.value?.toFixed(2).toString().replace(".", ",")}
      </strong>{" "}
      sem juros
    </p>
  );
};

export default InstallmentProduct;