import { useTranslations } from "next-intl";
import clsx from "clsx";

import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate";
import { getFormattedPrice } from "@/shared/utils/price";
import { Currency } from "@/types";

import { CountdownTimer } from "..";

import styles from "./PricingSummary.module.scss";

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

export default function PricingSummary({
  totalToday,
  originalPrice,
  discountedPrice,
  trialDuration,
  saveText,
  currency,
}: PricingSummaryProps) {
  const t = useTranslations(
    translatePathEmailMarketingCompatibilityV1("SpecialOffer")
  );

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