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

const ProductContext = () => {
  const productContextValue = useProduct();
  console.log(productContextValue);

  return (
    <div className={styles.pixWrapper}>
      <div className={styles.imagePix}>
        <img
          src="https://agenciamagma.vtexassets.com/arquivos/pix-leo.svg"
          alt="pix"
        />
      </div>
      <div className={styles.textBox}>
      <p className={styles.textPrice}>{productContextValue?.product?.priceRange?.sellingPrice?.highPrice}</p>
      <p className={styles.textDescount}>10 % de desconto</p>
      </div>
    </div>
  );
};

export default ProductContext;