import { useTranslation } from "react-i18next";
import styles from "./styles.module.css";
import TotalToday from "./TotalToday";
import ApplePayButton from "../PaymentPage/methods/ApplePayButton";
import { IPaywallProduct } from "@/api/resources/Paywall";

interface ISubPlanInformationProps {
  product: IPaywallProduct;
  client_secret?: string;
}

const getPrice = (product: IPaywallProduct): string => {
  return `$${
    (product.trialPrice === 100 ? 99 : product.trialPrice || 0) / 100
  }`;
};

function SubPlanInformation({
  product,
  client_secret,
}: ISubPlanInformationProps): JSX.Element {
  const { t } = useTranslation();

  return (
    <div className={styles.container}>
      <TotalToday total={getPrice(product)} />
      {client_secret && (
        <ApplePayButton activeProduct={product} client_secret={client_secret} />
      )}
      <p className={styles.description}>
        {t("auweb.pay.information").replaceAll("%@", getPrice(product))}.
      </p>
    </div>
  );
}

export default SubPlanInformation;