import Title from "@/components/Title";
import { images } from "../../data";
import styles from "./styles.module.scss";
import Button from "../../ui/Button";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";

function EmailConfirm() {
  const navigate = useNavigate();

  const handleNext = () => {
    navigate(routes.client.chatsThankYou());
  };

  return (
    <section className={styles.container}>
      <img
        className={styles.image}
        src={images("email-consent.webp")}
        alt="email consent"
      />
      <Title className={styles.title} variant="h2">
        Don't miss out on a single perk!
      </Title>
      <p className={styles.text}>
        Get access to <b>relationship tips</b>, astrology insights, tasty
        recipes, and more. Plus, receive <b>complimentary gifts</b> just for
        signing up
      </p>
      <p className={styles.text}>
        To get all this, just opt-in to our email updates
      </p>
      <div className={styles.footer}>
        <Button classNameContainer={styles.button} onClick={handleNext}>
          Confirm
        </Button>
        <Button classNameContainer={styles["button-know"]} onClick={handleNext}>
          I know everything about astrology & relationship
        </Button>
      </div>
    </section>
  );
}

export default EmailConfirm;