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

import "./parcelamentoPage.css"

const Parcelamento = () => {
  const CSS_HANDLES = ['ParcelaWrapper']

  const handles = useCssHandles(CSS_HANDLES)
  const product = useProduct()

  const Installments = {
    numberOfInstallments:
      product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
        .NumberOfInstallments,
  }
  const Price = {
    numberOfInstallments:
      product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value,
  }
  console.log(product)
  return (
    <p className={handles.handles.ParcelaWrapper}>
      {Installments.numberOfInstallments}&nbsp;x&nbsp;de&nbsp;R$&nbsp;
      {Price.numberOfInstallments?.toFixed(2).toString().replace('.', ',')} sem
      juros
    </p>
  )
}

export default Parcelamento