challenge-vtex-io-josecarloslins/react/components/descont-pix/index.tsx

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

export const DescontPix: FC = () => {

  const productContextValue = useProduct();

  let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice);
  sellingPrice = (sellingPrice - (sellingPrice/10));

  return (
    <div className={styles.containerDescontPix}>
      <img src="https://agenciamagma.vteximg.com.br/arquivos/logoPixjosecarloslins.png" alt="Logo PIX" />
      <div className={styles.containerDescontPixPrice}>
        <span className={styles.priceDescontPix}>R$ {sellingPrice.toFixed(2).replace(".", ",")}</span>
        <span className={styles.descontDescontPix}>10 % de desconto</span>
      </div>
    </div>
  );
}