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

const Pix = () => {
  const productContextValue = useProduct();
  const price = productContextValue?.product?.priceRange.listPrice.highPrice;

  console.log(productContextValue);

  console.log(price);
  let pix;
  let valuePix;

  if (price !== undefined) {
    pix = (price / 100) * 10;
    console.log(pix, "valor lido");
    valuePix = price - pix;
    console.log(valuePix);
  }

  const CSS_HANDLES = [
    'imagePix',
    'textPix'
  ]

  const handles = useCssHandles(CSS_HANDLES)

  return (
    <div>
      <img
        className={handles.}
        alt="imagem pix"
        src="https://agenciamagma.vteximg.com.br/arquivos/pix.png"
      />
      <p>R$ {valuePix}</p>
    </div>
  );
};

export default Pix;