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";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function EmailConfirm() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  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">
        {translate("/emailConfirm.title")}
      </Title>
      <p className={styles.text}>
        {translate("/emailConfirm.text_1", {
          relationship: <b>{translate("/emailConfirm.text_1_relationship")}</b>,
          gifts: <b>{translate("/emailConfirm.text_1_gifts")}</b>,
        })}
      </p>
      <p className={styles.text}>{translate("/emailConfirm.text_2")}</p>
      <div className={styles.footer}>
        <Button classNameContainer={styles.button} onClick={handleNext}>
          {translate("/emailConfirm.confirm")}
        </Button>
        <Button classNameContainer={styles["button-know"]} onClick={handleNext}>
          {translate("/emailConfirm.i_know")}
        </Button>
      </div>
    </section>
  );
}

export default EmailConfirm;
