import React from 'react'

import { useProduct } from 'vtex.product-context'
import { useCssHandles } from 'vtex.css-handles'

import './pix.css'

const Pix = () => {
  const CSS_HANDLES = ['pixwrapper', 'pixPrice']

  const handles = useCssHandles(CSS_HANDLES)
  const product = useProduct()
  const productPrice = product?.selectedItem?.sellers[0].commertialOffer.Price

  let descontoPixValue = 0
  if (productPrice) descontoPixValue = productPrice * 0.9

  return (
    <>
      <section className={handles.handles.pixwrapper}>
        <img
          src="https://agenciamagma.vteximg.com.br/arquivos/pixgabrielFerraz.svg"
          alt="image-pix"
        />
        <div className={handles.handles.pixPrice}>
          R$&nbsp;{descontoPixValue.toFixed(2).toString().replace('.', ',')}
          <p>10 % de desconto</p>
        </div>
      </section>
    </>
  )
}

export default Pix