import Answers from "@/components/ChatsPath/components/Answers";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import styles from "./styles.module.scss";
import { useUpdateStep } from "@/components/ChatsPath/hooks/useUpdateStep";
import { goalAnswers } from "@/components/ChatsPath/data/goalAnswers";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function Goal() {
  const { translate } = useTranslations(ELocalesPlacement.Chats);
  useUpdateStep(2);
  const navigate = useNavigate();

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

  const answers = goalAnswers.map((answer) => {
    return {
      ...answer,
      name: translate(answer.name as string),
      onClick: handleNext,
    };
  });

  return (
    <>
      <h2 className="chats-answers-title">{translate("/quiz/goal.title")}</h2>
      <Answers classNameAnswer={styles.answer} answers={answers} />
    </>
  );
}

export default Goal;
