import { combineStyles } from "@/services/styles";
import styles from "./styles.module.scss";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";
import React from "react";

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

function PriceComparison({ oldPrice, newPrice }: PriceComparisonProps) {
    const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV1);

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

            <div className={combineStyles(styles.priceCard, styles.newPriceCard)}>
                <div className={styles.header}>
                    {translate("marketing-landing.new-price-label")}
                </div>
                <div className={styles.priceContent}>
                    <div className={styles.price}>${newPrice}</div>
                </div>
            </div>
        </div>
    )
}

export default PriceComparison