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

function ThankYou() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const navigate = useNavigate();
  const user = useSelector(selectors.selectUser);
  const username = user?.profile?.full_name;

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

  return (
    <section className={styles.container}>
      <img
        className={styles.image}
        src={images("big_check.webp")}
        alt="big check"
      />
      <Title className={styles.title} variant="h2">
        {!username?.length && translate("/thankYou.title_without_name")}
        {username?.length &&
          translate("/thankYou.title", {
            name: username,
          })}
      </Title>
      <Title className={styles.subtitle} variant="h3">
        {translate("/thankYou.description")}
      </Title>

      <div className={styles.summary}>
        <div className={styles["indicator-base"]} />
        <ul>
          <div className={styles["marker-wrapper"]}>
            <span className={styles.marker}>1</span>
            <li>
              <p className={styles["trait-name"]}>
                {translate("/thankYou.point_1_title")}
              </p>
              <p className={styles["trait-value"]}>
                {translate("/thankYou.point_1_text")}
              </p>
            </li>
          </div>
          <div className={styles["marker-wrapper"]}>
            <span className={styles.marker}>2</span>
            <li>
              <p className={styles["trait-name"]}>
                {translate("/thankYou.point_2_title")}
              </p>
              <p className={styles["trait-value"]}>
                {translate("/thankYou.point_2_text")}
              </p>
            </li>
          </div>
          <div className={styles["marker-wrapper"]}>
            <span className={styles.marker}>3</span>
            <li>
              <p className={styles["trait-name"]}>
                {translate("/thankYou.point_3_title", {
                  style: (
                    <strong>
                      {translate("/thankYou.point_3_title_style")}
                    </strong>
                  ),
                })}
              </p>
              <p className={styles["trait-value"]}>
                {translate("/thankYou.point_3_text")}
              </p>
            </li>
          </div>
        </ul>
      </div>

      <div className={styles.footer}>
        <Button classNameContainer={styles.button} onClick={handleNext}>
          {translate("/thankYou.start")}
        </Button>
      </div>
    </section>
  );
}

export default ThankYou;
