import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { images } from "../../data";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { Currency } from "@/components/PaymentTable";
import { PeriodType, useTranslations } from "@/hooks/translations";

interface ISecretDiscountTableProps {
    trialPrice: number | string;
    trialInterval: number;
    trialPeriod: PeriodType;
    oldPrice: number | string;
    oldDiscount: number;
    newDiscount: number;
    currency: Currency;
}

function SecretDiscountTable({
    trialPrice,
    trialInterval,
    trialPeriod,
    oldPrice,
    oldDiscount,
    newDiscount,
    currency
}: ISecretDiscountTableProps) {
    const { translate, getPeriodText } = useTranslations(ELocalesPlacement.EmailMarketingPalmistryV2);

    const formatDiscount = (discount: number) => `-${discount}%`;

    return (
        <div className={styles.container}>
            <Title className={styles.title} variant="h3">
                {translate("secret-discount.secret-discount-table_title")}
            </Title>
            <p className={styles.subtitle}>
                {translate("secret-discount.secret-discount-table_subtitle")}
            </p>
            <div className={styles.applied}>
                <img src={images("discount/gift.png")} alt="Gift" />
                <Title className={styles.title} variant="h4">
                    {translate("secret-discount.secret-discount-table_discount-applied")}
                </Title>
                <span className={styles["old-discount"]}>{formatDiscount(oldDiscount)}</span>
                <span className={styles["new-discount"]}>{formatDiscount(newDiscount)}</span>
            </div>
            <div className={`${styles["grid-line"]} ${styles["days-14"]}`}>
                <p>{translate("secret-discount.secret-discount-table_cost-after-trial", {
                    trialPeriod: getPeriodText(trialPeriod, trialInterval)
                })}</p>
                <span className={styles["old-price"]}>{addCurrency(oldPrice, currency)}</span>
                <span className={styles["new-price"]}>{addCurrency(trialPrice, currency)}</span>
            </div>
            <div className={`${styles["grid-line"]} ${styles["save"]}`}>
                <p>{translate("secret-discount.secret-discount-table_you-save", { amount: addCurrency(Number(oldPrice) - Number(trialPrice), currency) })}</p>
            </div>
            <hr />
            <div className={`${styles["grid-line"]} ${styles["total-today"]}`}>
                <p>{translate("secret-discount.secret-discount-table_total-today")}</p>
                <span>{addCurrency(trialPrice, currency)}</span>
            </div>
        </div>
    )
}

export default SecretDiscountTable