challenge-vtex-io-henrique-santos-santana/react/components/PixCustomInstallments/_PixCustomInstallments.tsx

import React from "react";

import styles from "./_PixCustomInstallments.module.css";

import { useProduct } from "vtex.product-context";
import { calculationPercent, sanatizeColor } from "./_ComponentsFunctions";

interface IPixCustomInstallmentsProps {
  label: string;
  percent: number;
  color: string;
}

export function PixCustomInstallments({
  label = "de desconto",
  percent = 10,
  color = "c-on-base",
}: IPixCustomInstallmentsProps) {
  const data = useProduct();

  return (
    <div className={`${styles["pix"]} flex`}>
      <img
        src="https://agenciamagma.vteximg.com.br/arquivos/pix-m3academy-henrquesantos-2023.svg"
        alt="Promoção de pagamento com o PIX"
      />
      <div>
        <p className={styles["pix__priceValue"]}>
          {`R$ ${calculationPercent(
            percent,
            data?.product?.priceRange.sellingPrice.highPrice
          )}`}
        </p>
        <p className={`${styles["pix__label"]} ${sanatizeColor(color)}`}>
          {`${percent}% ${label}`}
        </p>
      </div>
    </div>
  );
}

PixCustomInstallments.schema = {
  title: "Promoção de pagamento com o PIX",
  type: "object",
  properties: {
    label: {
      type: "string",
    },
    percent: {
      type: "number",
    },

    color: {
      type: "string",
    },
  },
};