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

import { Typography } from "@/components/ui";
import { translatePathEmailMarketingSoulmateV1 } from "@/shared/constants/translate";
import { getFormattedPrice } from "@/shared/utils/price";
import { Currency } from "@/types";

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

interface IPricesProps {
  oldPrice: number;
  newPrice: number;
  currency: Currency;
}

const computeDiscount = (oldPrice: number, newPrice: number) => {
  return Math.ceil(((oldPrice - newPrice) / oldPrice) * 100);
};

export default async function Prices({
  oldPrice,
  newPrice,
  currency,
}: IPricesProps) {
  const t = await getTranslations(
    translatePathEmailMarketingSoulmateV1("Landing.special-offer.prices")
  );

  return (
    <div className={styles.container}>
      <div className={styles.oldPriceContainer}>
        <div className={styles.discount}>
          -{computeDiscount(oldPrice, newPrice)}%
        </div>
        <Typography color="white" className={styles.oldPrice}>
          {getFormattedPrice(oldPrice, currency)}
        </Typography>
        <Typography color="white" className={styles.oldPriceDescription}>
          {t("old-price.description")}
        </Typography>
      </div>
      <div className={styles.newPriceContainer}>
        <Typography color="white" className={styles.newPrice}>
          {getFormattedPrice(newPrice, currency)}
        </Typography>
        <Typography color="white" className={styles.newPriceDescription}>
          {t("new-price.description")}
        </Typography>
      </div>
    </div>
  );
}
