import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import Button from "../../ui/Button";
import { images } from "../../data";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

const currentGoal: Record<string, string> = {
  about_ex: "/recognize.about_ex",
  give_advice: "/recognize.give_advice",
  give_guidance: "/recognize.give_guidance",
  all: "/recognize.all",
  default: "/recognize.all",
};

function Recognize() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  const navigate = useNavigate();
  const { goal } = useSelector(selectors.selectAnswers);

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

  return (
    <section className={styles.container}>
      <img
        className={styles.image}
        src={images("life_goal_pic.webp")}
        alt="Life goal pic"
      />
      <Title className={styles.title} variant="h2">
        {translate("/recognize.title")}
      </Title>
      <Title className={styles.subtitle} variant="h3">
        {translate("/recognize.subtitle")}
      </Title>
      <div className={styles.goal}>
        <span className={styles["goal-text"]}>
          <span>{translate(currentGoal[goal] || currentGoal.default)}</span>
        </span>
      </div>
      <p className={styles.text}>{translate("/recognize.description")}</p>
      <Button classNameContainer={styles.button} onClick={handleNext}>
        {translate("continue")}
      </Button>
    </section>
  );
}

export default Recognize;
