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

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

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

  const answers: IAnswer[] = [
    {
      id: 1,
      value: "specific_predictions",
      name: translate("/quiz/whatToExpect.answer_1"),
      questionId: "whatToExpect",
      onClick: handleNext,
    },
    {
      id: 2,
      value: "guidance_on_decisions",
      name: translate("/quiz/whatToExpect.answer_2"),
      questionId: "whatToExpect",
      onClick: handleNext,
    },
    {
      id: 3,
      value: "confirmation_of_own_intuition",
      name: translate("/quiz/whatToExpect.answer_3"),
      questionId: "whatToExpect",
      onClick: handleNext,
    },
    {
      id: 4,
      value: "general_advice",
      name: translate("/quiz/whatToExpect.answer_4"),
      questionId: "whatToExpect",
      onClick: handleNext,
    },
    {
      id: 5,
      value: "all_the_above",
      name: translate("/quiz/whatToExpect.answer_5"),
      questionId: "whatToExpect",
      onClick: handleNext,
    },
    {
      id: 6,
      value: "not_sure",
      name: translate("not_sure"),
      questionId: "whatToExpect",
      onClick: handleNext,
    },
  ];

  return (
    <>
      <h2 className={`chats-answers-title ${styles.title}`}>
        {translate("/quiz/whatToExpect.title")}
      </h2>
      <Answers answers={answers} />
    </>
  );
}

export default WhatToExpect;
