import Title from "@/components/Title";
import styles from "./styles.module.css";
import MainButton from "@/components/MainButton";
import PaymentDiscountTable from "./PaymentDiscountTable";
import Modal from "@/components/Modal";
import PaymentModal from "../TrialPayment/components/PaymentModal";
import { useState } from "react";

function TrialPaymentWithDiscount() {
  const [isOpenPaymentModal, setIsOpenPaymentModal] = useState<boolean>(false);

  const handleClose = () => {
    setIsOpenPaymentModal(false);
  };

  return (
    <section className={`${styles.page} page`}>
      <Modal open={isOpenPaymentModal} onClose={handleClose}>
        <PaymentModal />
      </Modal>
      <img
        className={styles["party-popper"]}
        src="/party_popper.png"
        alt="Party popper"
      />
      <Title variant="h2" className={styles.title}>
        You get a secret discount!
      </Title>
      <PaymentDiscountTable />
      <MainButton
        className={styles.button}
        onClick={() => setIsOpenPaymentModal(true)}
      >
        Start your 3-day trial
      </MainButton>
      <p className={styles.policy}>
        By continuing you agree that if you don't cancel prior to the end of the
        3-days trial, you will automatically be charged $9 for the introductory
        period of 14 days thereafter the standard rate of $9 every 14 days until
        you cancel in settings. Learn more about cancellation and refund policy
        in Subscription terms.
      </p>
    </section>
  );
}

export default TrialPaymentWithDiscount;