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

import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate";

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

interface PriceComparisonProps {
  oldPrice: number | string | React.ReactNode;
  newPrice: number | string;
}

export default function PriceComparison({
  oldPrice,
  newPrice,
}: PriceComparisonProps) {
  const t = useTranslations(
    translatePathEmailMarketingCompatibilityV1("Landing")
  );

  return (
    <div className={styles.container}>
      <div className={clsx(styles.priceCard, styles.oldPriceCard)}>
        <div className={styles.header}>{t("old-price-label")}</div>
        <div className={styles.priceContent}>
          <div className={styles.price}>{oldPrice}</div>
        </div>
      </div>

      <div className={clsx(styles.priceCard, styles.newPriceCard)}>
        <div className={styles.header}>{t("new-price-label")}</div>
        <div className={styles.priceContent}>
          <div className={styles.price}>{newPrice}</div>
        </div>
      </div>
    </div>
  );
}
