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

import style from "./PayWithPix.css";

const PayWithPix = () => {
  const productContextValue = useProduct();

  const discount =
    (productContextValue?.product?.priceRange?.sellingPrice?.highPrice ?? 0) *
    0.9;
  const priceFormatted = discount?.toFixed(2).toString().replace(".", ",");

  return (
    <div className={style.PayWithPix}>
      <div className={style.PayWithPix__wrapper}>
        <p className={style.PayWithPix__price}>R$ {priceFormatted}</p>
        <span className={style.PayWithPix__discount}>10 % de desconto</span>
      </div>
    </div>
  );
};

export { PayWithPix };