import { combineStyles } from '@/services/styles';
import CountdownTimer from '../CountdownTimer';
import styles from './styles.module.scss';
import { useTranslations } from "@/hooks/translations";
import { addCurrency, ELocalesPlacement } from "@/locales";
import { Currency } from '@/components/PaymentTable';

interface PricingSummaryProps {
    totalToday: number | string;
    originalPrice: number | string;
    discountedPrice: number | string;
    trialDuration: number | string;
    saveText: string;
    currency: Currency;
}

function PricingSummary({
    totalToday,
    originalPrice,
    discountedPrice,
    trialDuration,
    saveText,
    currency
}: PricingSummaryProps) {
    const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV1);

    return (
        <div className={styles.container}>
            <div className={styles.table}>
                <div className={combineStyles(styles.row, styles.totalRow)}>
                    <span className={styles.label}>{translate("special-offer.pricing-summary-total-today")}</span>
                    <span className={styles.price}>${totalToday}</span>
                </div>
                <div className={combineStyles(styles.row, styles.codeRow)}>
                    <span className={styles.codeApplied}>{translate("special-offer.pricing-summary-code-applied")}</span>
                    <CountdownTimer />
                </div>
                <div className={combineStyles(styles.row, styles.costRow)}>
                    <span className={styles.label}>{translate("special-offer.pricing-summary-cost-after-trial")}</span>
                    <div className={styles.prices}>
                        <span className={styles.originalPrice}>${originalPrice}</span>
                        <span className={styles.discountedPrice}>${discountedPrice}</span>
                    </div>
                </div>
                <div className={styles.savingsRow}>
                    {saveText}
                </div>
            </div>
            <p className={styles.description}>
                {translate("special-offer.pricing-summary-trial-description", {
                    totalToday: addCurrency(totalToday, currency),
                    trialDuration: trialDuration
                })}
            </p>
        </div>
    );
}

export default PricingSummary;