import Title from "@/components/Title";
import styles from "./styles.module.css";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { IPaywallProduct } from "@/api/resources/Paywall";

const getPrice = (product: IPaywallProduct | null) => {
  if (!product) {
    return 0;
  }
  return (product.trialPrice === 100 ? 99 : product.trialPrice || 0) / 100;
};

function PaymentDiscountTable() {
  const activeProduct = useSelector(selectors.selectActiveProduct);

  return (
    <div className={styles.container}>
      <Title variant="h3" className={styles.title}>
        You get a secret discount!
      </Title>
      <p className={styles["no-pressure"]}>No pressure. Cancel anytime.</p>
      <div className={styles.applied}>
        <div className={styles.side}>
          <img
            className={styles["present-image"]}
            src="/present.png"
            alt="Present"
          />
          <p className={styles.description}>Secret discount applied!</p>
        </div>
        <div className={styles.side}>
          <span className={styles.discount}>-30%</span>
          <strong>-50%</strong>
        </div>
      </div>
      <div className={styles["cost-container"]}>
        <p>Your cost per 14 days after trial:</p>
        <div className={styles.side}>
          <span className={styles.discount}>$19</span>
          <strong>$9</strong>
        </div>
      </div>
      <p className={styles.save}>You save $30</p>
      <hr className={styles.line} />
      <div className={styles["total-container"]}>
        <p>Total today:</p>
        {activeProduct && <strong>${getPrice(activeProduct)}</strong>}
      </div>
    </div>
  );
}

export default PaymentDiscountTable;