import { getTranslations } from "next-intl/server";
import clsx from "clsx";

import { Typography } from "@/components/ui";
import { translatePathEmailMarketingSoulmateV1 } from "@/shared/constants/translate";
import { calculatePricePerDay } from "@/shared/utils/period-conversion";
import { getPeriodTextServer } from "@/shared/utils/period-server";
import { getFormattedPrice } from "@/shared/utils/price";
import { Currency } from "@/types";
import { PeriodType } from "@/types/period";

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

interface PricingSummaryProps {
  trialPrice: number;
  trialInterval: number;
  trialPeriod: PeriodType;
  price: number;
  billingInterval: number;
  billingPeriod: PeriodType;
  currency: Currency;
}

export default async function PricingSummary({
  trialPrice,
  trialInterval,
  trialPeriod,
  price,
  billingInterval,
  billingPeriod,
  currency,
}: PricingSummaryProps) {
  const t = await getTranslations(
    translatePathEmailMarketingSoulmateV1("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(trialPrice), currency)}
          </span>
        </div>

        <div className={clsx(styles.row, styles.codeRow)}>
          <span className={styles.label}>
            {t("pricing-summary-code-applied")}
          </span>
          <div className={styles.prices}>
            <span className={styles.oldPrice}>
              {getFormattedPrice(Number(price), currency)}
            </span>
            <span className={styles.price}>
              {getFormattedPrice(Number(trialPrice), currency)}
            </span>
          </div>
        </div>

        <Typography as="p" align="left" className={styles.description}>
          {t("cost-for-one-day", {
            cost: getFormattedPrice(
              calculatePricePerDay(price, billingInterval, billingPeriod),
              currency
            ),
          })}
        </Typography>
      </div>
      <Typography className={styles.title}>
        {t("save-every-period", {
          price: getFormattedPrice(price - trialPrice, currency),
        })}
      </Typography>
      <p className={styles.description}>
        {t("pricing-summary-trial-description", {
          trialPrice: getFormattedPrice(trialPrice, currency),
          trialPeriod: await getPeriodTextServer(
            trialPeriod,
            trialInterval,
            "period_adjective"
          ),
          price: getFormattedPrice(price, currency),
          billingPeriod: await getPeriodTextServer(
            billingPeriod,
            billingInterval
          ),
        })}
      </p>
    </div>
  );
}
