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

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={logopix} alt="Desconto no 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>
  );
}