import Title from "@/components/Title";
import styles from "./styles.module.css";

function ComparePrices({
  oldPrice,
  newPrice,
}: {
  oldPrice: string;
  newPrice: string;
}) {
  return (
    <div className={styles.container}>
      <div className={`${styles["old-price"]} ${styles["price-container"]}`}>
        <div className={styles["header-container"]}>
          <Title variant="h3" className={styles.title}>
            old price
          </Title>
        </div>
        <div className={styles["main-container"]}>
          <p className={styles.text}>{oldPrice}</p>
        </div>
      </div>
      <div className={`${styles["new-price"]} ${styles["price-container"]}`}>
        <div className={styles.free}>free</div>
        <div className={styles["header-container"]}>
          <Title variant="h3" className={styles.title}>
            new price
          </Title>
        </div>
        <div className={styles["main-container"]}>
          <p className={styles.text}>${newPrice}</p>
        </div>
      </div>
    </div>
  );
}

export default ComparePrices;
