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

const piximgacademy = () => {

  const CSS_HANDLES = [
    "pixwrapper",
    "priceandp"
  ]
  const handles = useCssHandles(CSS_HANDLES)
  const product = useProduct()
  const productPrice = product?.selectedItem?.sellers[0].commertialOffer.Price
  const discount = Number(productPrice) * 0.1
  const pixprice = Number(productPrice) - discount
  return (
    <>
      <section className={handles.handles.pixwrapper}>
        <div>
          <img src="https://agenciamagma.vteximg.com.br/arquivos/pix-samuelcondack.svg" alt="imagem pix" />
        </div>
        <div className={handles.handles.priceandp}>
          R$&nbsp;{pixprice.toFixed(2).toString().replace(".",",")}
          <p>10 % de desconto</p>
        </div>
      </section>
    </>
  )
}
export default piximgacademy;