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

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

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="vtex-flex-layout-0-x-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;