import React, { FC } from 'react'
import { useProduct } from 'vtex.product-context'
import styles from "./styles.css";

export const DescontPix: FC = () => {

  const productContextValue = useProduct();
  console.log(productContextValue);
  // const fetchApi = async () => {
  //   fetch("/api/checkout/pub/orderForms/simulation", {
  //     method: "POST",
  //     headers: {
  //       Accept: "application/json",
  //       "Content-Type": "application/json",
  //     },
  //     body: `
  //     {
  //       "items": [
  //         {
  //           "id": ${productContextValue?.selectedItem?.itemId},
  //           "seller": ${productContextValue?.selectedItem?.sellers[0].sellerId},
  //           "quantity": ${productContextValue?.selectedQuantity}
  //           ]
  //         }
  //       ],
  //       "country": "BRA"
  //     }`,
  //   })
  //     .then((response) => response.json())
  //     .then((data) => {
  //       console.log(data)
  //     })
  // }

  // fetchApi();

  let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice);
  sellingPrice = (sellingPrice - (sellingPrice/10));


  return (
    <div className={styles.containerDescontPix}>
      <img src="https://agenciamagma.vteximg.com.br/arquivos/logoPixjosecarloslins.png" alt="Logo PIX" />
      <div className={styles.containerDescontPixPrice}>
        <span className={styles.priceDescontPix}>R$ {sellingPrice.toFixed(2).replace(".", ",")}</span>
        <span className={styles.descontDescontPix}>10 % de desconto</span>
      </div>
    </div>
  );
}