challenge-vtex-io-ana-carolina-duarte-cavalcante/react/components/InstallmentProduct/InstallmentProduct.tsx

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

const InstallmentProduct = () => {
  const product = useProduct();

  const productWithInstallments = {
    numberOfInstallments:
      product?.selectedItem?.sellers[0].commertialOffer.Installments[10]
        .NumberOfInstallments,
    value:
      product?.selectedItem?.sellers[0].commertialOffer.Installments[10].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;